javascript展开/折叠按钮
javascript展开/折叠按钮
提问于 2015-05-29 07:13:14
我正在尝试创建一个切换内容按钮，该按钮加载已经隐藏的内容。这是我正在使用的代码，但我不确定如何使内容显示为隐藏(使切换按钮功能更多地用于展开内容)
$(function() {
var b = $("#button");
var w = $("#wrapper");
var l = $("#list");
w.height(l.outerHeight(true));
b.click(function() {
if(w.hasClass('open')) {
w.removeClass('open');
w.height(0);
} else {
w.addClass('open');
w.height(l.outerHeight(true));
}
});
});#wrapper {
background: #ccc;
overflow: hidden;
transition: height 200ms;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Toggle Expand/Collapse</button>
<div id="wrapper" class="open">
<ul id="list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
Stack Overflow用户
发布于 2015-05-29 07:16:12
使用CSS
您只需使用CSS就可以完成此任务：
div#wrapper {
transition: max-height 1000ms;
overflow: hidden;
}
#toggle:not(:checked) ~ div#wrapper {
max-height: 0;
}
#toggle:checked ~ div#wrapper {
max-height: 200px;
}
#toggle:checked ~ label:after {
content: "hide"
}
#toggle:not(checked) ~ label:after {
content: "show"
}<input type="checkbox" id="toggle">
<label for="toggle"></label>
<div id="wrapper" class="open">
<ul id="list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
使用JavaScript
你差不多就在那儿。只需使用$.hide和$.show而不是$.height。
不过，一个更简洁的方法是$.toggle，它所做的代码与下面的代码相同。
$(function() {
var b = $("#button");
var w = $("#wrapper");
var l = $("#list");
w.height(l.outerHeight(true));
b.click(function() {
if(w.hasClass("open")) {
w.hide();
} else {
w.show()
}
w.toggleClass("open");
});
});#wrapper {
background: #ccc;
overflow: hidden;
transition: height 200ms;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Toggle Expand/Collapse</button>
<div id="wrapper" class="open">
<ul id="list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30523370
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号