用Jquery点击展开，出现隐藏的DIV,点击收起DIV又隐藏起来.

最新推荐文章于 2025-11-03 13:16:21 发布

原创最新推荐文章于 2025-11-03 13:16:21 发布 · 1.2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

本文介绍如何利用jQuery实现页面中元素的展开与折叠效果，通过编写简单的JavaScript代码，可以轻松地控制元素的显示状态，适用于网页设计与前端开发。

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
    $("#toggle").click(function() {
        $(this).text($("#content").is(":hidden") ? "收起" : "展开");
        $("#content").slideToggle();
    });
});
</script>

<pre name="code" class="html"><a href="#" id="toggle">展开</a>
<div id="content" style="display: none;"><p>隐藏内容<p><p>隐藏内容<p></div>

如果是一个自动生成的表格的话，数据比较多也想隐藏一个单元格中的数据是也可以是用该方法：

1：把id改为calss选择器

2：获得对象要考虑是当前表格当前行里面的对象

代码示例：

$(function() {
	    $(".toggle").click(function() {
	    	
	        $(this).text($(this).parent().parent().find(".content").is(":hidden") ? "收起" : "展开");
	        $(this).parent().parent().find(".content").slideToggle();
	    });
	});
	
	</script>

<span style="font-family: Arial, Helvetica, sans-serif;"><a href="#" class="toggle" >展开</a></span>

<div class="content" style="display: none;"></div>