要求 ：单击“显示”按钮时，需要显示可折叠的内容，单击“隐藏”按钮时，需要隐藏可折叠的内容。
解决方案 ：jQuery toggle（）函数。
演示：单击“显示”按钮。
1.可折叠的内容
以下是可折叠内容的HTML示例：
<section class="round-border">
<h2>Use jQuery toggle to hide/show collapse content</h2>
<div>
<button href="#collapse1" class="nav-toggle">Show</button>
</div>
<div id="collapse1" style="display:none">
<p>Bla bla bla bla</p>
</div>
</section> <div id="collapse1" style="display:none">上方的“ div”元素被隐藏。 为了在单击“显示”按钮时显示内容，我们需要为“显示”按钮创建click事件，如下所示：
$('.nav-toggle').click(function(){
//logic to show/hide collapsable content
});2.获取选择器
从属性href获取折叠内容的选择器：
var collapse_content_selector = $(this).attr('href');3.切换以显示和隐藏
使用jQuery切换显示/隐藏可折叠内容，如下所示：
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
toggle_switch.html('Show');//change the button label to be 'Show'
}else{
toggle_switch.html('Hide');//change the button label to be 'Hide'
}
});4.完整的例子
<html>
<head>
<title>jQuery toggle to display and hide content</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
//change the button label to be 'Show'
toggle_switch.html('Show');
}else{
//change the button label to be 'Hide'
toggle_switch.html('Hide');
}
});
});
});
</script>
<style>
.round-border {
border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 10px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<section class="round-border">
<h2>jQuery toggle() to hide/show collapse content</h2>
<div>
<button href="#collapse1" class="nav-toggle">Show</button>
</div>
<div id="collapse1" style="display:none">
<p>Bla bla bla bla</p>
</div>
</section>
</body>
</html>下载源代码
下载它– jQuery-toggle-to-display-hide-content.zip （1kb）
参考
翻译自: https://mkyong.com/jquery/jquery-toggle-example-to-display-and-hide-content/