jQuery-用一個按鈕控制多個div收起或展開


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>

點擊按鈕(收起)后效果:

再次點擊按鈕(此時按鈕顯示為“展開”)后效果:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM