用Jquery點選展開,出現隱藏的DIV,點選收起DIV又隱藏起來.
阿新 • • 發佈:2018-12-30
<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>