在可扩展 <div> 中使用 jquery 创建可扩展 <div>答案

【问题标题】：Create expandable <div> with jquery within expandable <div>在可扩展 <div> 中使用 jquery 创建可扩展 <div>
【发布时间】：2016-05-17 11:27:27
【问题描述】：

不久前，我在尝试构建可扩展的 Div-Container 时发现了这段代码来创建可扩展/可折叠的代码，到目前为止它对我来说已经创造了奇迹（这里是没有经验的爱好设计师）。

现在我想在其中一个中插入一个可扩展的 div。我面临的问题是我无法弄清楚如何按顺序更改函数，因此它会自动重新调整第一个可扩展 div 的外部高度。我有一个它应该是什么样子的例子（如果我展开 Collapsible 1-3 它也应该展开 Collapsible 1 以便所有内容都可见）：

可折叠 1

可折叠 1-1
可折叠 1-2
可折叠 1-3

我使用的代码可以在这里找到：

HTML：

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

CSS：

#wrapper {
background: #ccc;
overflow: hidden;
transition: height 200ms;
}

JS：

$(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));
 }

 });
 });

【问题讨论】：

标签： jquery css containers expandable

【解决方案1】：

您可以使用.slideDown 和.slideUp 来代替计算高度。

$(document).ready(function() {
  $('#button').click(function() {
    $('#wrapper').toggleClass('open').slideToggle(200);
  });
});

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

【讨论】：