slideToggle() 方法
頁面代碼部分:
<body> <button type="button">收起</button> <div id="dd">第一行</div> <div id="div1" class="d1">233333</div> <div id="dd2">第二行</div> <div id="div2" class="d1">344444</div> <div id="dd3">第三行</div> <div id="div3" class="d1">455555</div> </body>
效果:
JS方法部分:
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("button").text($(".d1").is(":hidden") ? "收起" : "展開"); //此處判斷div層的class屬性值來動態更改按鈕的text值 $(".d1").slideToggle(); }); }); </script>
點擊按鈕(收起)后效果:
再次點擊按鈕(此時按鈕顯示為“展開”)后效果: