1. 程式人生 > >用Jquery點選展開,出現隱藏的DIV,點選收起DIV又隱藏起來.

用Jquery點選展開,出現隱藏的DIV,點選收起DIV又隱藏起來.

<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>