javascript 展开/折叠按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30523370/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript expand/collapse button
提问by New Life
I'm trying to create a toggle content button that loads with the content already hidden. This is the code I'm using but I'm not sure how to make the content appear as hidden (making the toggle button function more used for expanding content)
我正在尝试创建一个切换内容按钮，该按钮加载已隐藏的内容。这是我正在使用的代码，但我不确定如何使内容显示为隐藏（使切换按钮功能更多地用于扩展内容）
$(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>采纳答案by SW4
Option 1: Simplified Code
选项 1：简化代码
You can actually simplify a fair amount by relying on CSS to define the show/hide style, and transitioning on max-height, you then simply toggle the addition of e.g. an openclass to allow the height of the content to expand.
您实际上可以通过依赖 CSS 来定义显示/隐藏样式并在 上进行转换来简化相当数量max-height，然后您只需切换添加例如一个open类以允许内容的高度扩展。
This also maintains strict separation of concerns, keeping functionality withiin Javascript and styling within CSS.
这也保持了严格的关注点分离，将功能保留在 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>Option 2: Revised Code
选项 2：修订代码
Alternatively, if you wish to use your existing code, you need to change it so the default state is hidden. Do this by setting the heightto zero in your CSS, removing the openclass from your HTML and removing the initial height setting from your Javascript:
或者，如果您希望使用现有代码，则需要更改它以便默认状态为hidden。通过height在您的 CSS 中将设置为零，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>回答by ozil
you can use jquery .toggle()method
你可以使用 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();
});
updated
you can add the following .css
更新
您可以添加以下内容.css
#wrapper {
background: #ccc;
display:none
}
回答by Parag Bhayani
jQuert toggle method will help you, if you want it hidden for the first time apply style like this -> style="display:none" If you want it visible then don't add this style
jQuert 切换方法会帮助你，如果你想第一次隐藏它应用这样的样式 -> style="display:none" 如果你想让它可见，那么不要添加这个样式
Basically what toggle function does is, if your component visible then hides it and if it is hidden then shows it...
基本上切换功能的作用是，如果您的组件可见则隐藏它，如果它隐藏则显示它......
$('#button').click(function(){
$('#wrapper').toggle();
})
below code will explain you better http://jsfiddle.net/31zfvm2u/
下面的代码将更好地解释你 http://jsfiddle.net/31zfvm2u/
回答by royhowie
using CSS
使用 CSS
You can accomplish this with just 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>using JavaScript
使用 JavaScript
You're pretty much there. Just use $.hideand $.showinstead of $.height.
你几乎在那里。只需使用$.hideand$.show而不是$.height。
A more succinct method would be $.toggle, however, which does the same as the below code.
$.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>回答by bhanu.cs
<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();
}
