javascript展开/折叠按钮

我正在尝试创建一个切换内容按钮，加载已隐藏的内容。 这是我正在使用的代码，但我不确定如何使内容显示为隐藏（使切换按钮功能更多地用于扩展内容）

$（函数（）{
变量b=$（“#按钮”）；
var w=$（“#包装”）；
var l=$（“#列表”）；
w、 高度（l.outerHeight（真））；
b、 单击（函数（）{
如果（w.hasClass（“打开”）{
w、 removeClass（“打开”）；
w、 高度（0）；
}否则{
w、 addClass（“打开”）；
w、 高度（l.outerHeight（真））；
}
});
});
#包装器{
背景：#ccc；
溢出：隐藏；
过渡段：高度200ms；
}

切换展开/折叠

项目
项目
项目
项目

使用CSS
您只需使用CSS即可实现这一点：


div#包装器{
过渡段：最大高度1000ms；
溢出：隐藏；
}
#切换：未（：选中）~div#包装器{
最大高度：0；
}
#切换：选中~div#wrapper{
最大高度：200px；
}
#切换：选中~标签：之后{
内容：“隐藏”
}
#切换：未（选中）~标签：之后{
内容：“表演”
}


项目
项目
项目
项目

切换展开/折叠

项目
项目
项目
项目

函数示例（）
{
$（#wrapper）.toogle（）；
}
您可以使用jquery
.toggle（）
方法

<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>  


$('#button').click(function(){
    $('#wrapper').toggle();
});  

选项1：简化代码
实际上，您可以通过依赖CSS定义显示/隐藏样式，并在
max height
上转换，从而简化相当数量的操作，然后只需切换添加的
open
类，以允许内容的高度扩展

这还保持了严格的关注点分离，保持了Javascript中的功能和CSS中的样式


$（函数（）{
变量b=$（“#按钮”）；
var w=$（“#包装”）；
var l=$（“#列表”）；
b、 单击（函数（）{
w、 toggleClass（'open'）；/*jqueryt-toggle方法将帮助您，如果您想第一次将其隐藏，请应用类似这样的样式->style=“display:none”如果您想使其可见，请不要添加此样式

基本上，切换函数的作用是，如果组件可见，则隐藏它，如果组件隐藏，则显示它

$('#button').click(function(){
    $('#wrapper').toggle();
})

下面的代码将更好地解释您
感谢您的快速回复。但是，当代码段运行时，它仍将ul显示为默认值。它需要作为折叠（未展开）加载@NewLife我添加了一个仅CSS的解决方案。如果您想让原始解决方案加载折叠的div，只需添加一个
w.hide（）
。感谢您的快速回复，但JSFIDLE仍以扩展的形式加载，而不是以隐藏的形式加载。非常感谢！这有助于我进一步理解它。@NewLife-没问题，总有一些方法可用，因此很高兴提供替代方法等：）是否有可能以更“通用”的方式使用选项1代码（使用“this”代码或类似的代码）？我的页面上有8个信息框，不必为每个框重复代码8次（每次使用不同的var id）。
#wrapper {
  background: #ccc;
  display:none
}  

$('#button').click(function(){
    $('#wrapper').toggle();
})