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>
点击按钮(收起)后效果:
再次点击按钮(此时按钮显示为“展开”)后效果: