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来定义显示/隐藏样式以及在open上转换来简化相当数量，然后您只需切换添加例如允许内容高度扩展的$(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 */ }); });类。

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

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

hidden

选项2：修订代码

或者，如果您希望使用现有代码，则需要更改它，以使默认状态为height。通过在CSS中将open设置为零，从HTML中删除$(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)); } }); });类并从Javascript中删除初始高度设置来执行此操作：

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

A = [[2, 0], [1, 0], [4, 3], [3, 2], [5, 1]] 

Answer 2

您可以使用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();
});  

DEMO

<强>更新
您可以添加以下.css

#wrapper {
  background: #ccc;
  display:none
}  

DEMO

Answer 3

jQuert toggle方法会帮助你，如果你想让它第一次隐藏应用这样的风格 - ＆gt; style =“display：none”如果您希望它可见，则不要添加此样式

基本上，切换功能的作用是，如果您的组件可见，则隐藏它，如果它被隐藏，则显示它...

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

下面的代码会更好地解释你 http://jsfiddle.net/31zfvm2u/

Answer 4

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

Answer 5

<button id="button" onclick=sample();>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>

function sample()
{
$(#wrapper).toogle();
}