javascript 展开/折叠按钮

Question

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

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

Answer 1

选项 1：简化代码

实际上，您可以通过依靠 CSS 定义显示/隐藏样式并进行转换来简化相当多的工作max-height，然后您只需切换添加例如一个open类以允许内容的高度扩展。

这也保持了严格的关注点分离，将功能保留在 Javascript 中，将样式保留在 CSS 中。

$(function() {
  var b = $("#button");
  var w = $("#wrapper");
  var l = $("#list");
  b.click(function() {
    w.toggleClass('open'); /* <-- toggle the application of the open class on click */
  });
});

#wrapper {
  background: #ccc;
  overflow: hidden;
  transition: max-height 300ms;
  max-height: 0; /* <---hide by default */
}
#wrapper.open {
  max-height: 100px; /* <---when open, allow content to expand to take up as much height as it needs, up to e.g. 100px */
}

<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">
  <ul id="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

选项 2：修订代码

或者，如果您希望使用现有代码，则需要更改它，使默认状态为hidden。为此，请height在 CSS 中将 设为 0，open从 HTML 中删除该类，并从 Javascript 中删除初始高度设置：

$(function() {
  var b = $("#button");
  var w = $("#wrapper");
  var l = $("#list");

  // w.height(l.outerHeight(true)); REMOVE THIS 

  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;
  height: 0; /* <-- set this */
}

<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"> REMOVE THIS  -->
<div id="wrapper">
  <ul id="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>