<分区>
我有五个侧边按钮，它们可以下拉到五个特定的“子菜单”。他们实际上只是div。我目前正在使用非常基本的 jquery 隐藏/显示它们，我想知道是否有更干净、更简单的方法来处理所有隐藏/显示调用？谢谢。
这是我的意思的 fiddle 示例:https://jsfiddle.net/SteveSerrano/b562v654/
HTML:
<!-- TOP MENU IS NOT HIDDEN UNTIL ANOTHER IS CLICKED -->
<button id="nyNavButton">NEW YORK</button>
<div id="nyContainer">
<div class="nav">
<ul>
<li>PHP generated links...</li>
<li>PHP generated links...</li>
<li>PHP generated links...</li>
</ul>
</div>
</div>
<button id="njNavButton">NEW JERSEY</button>
<div id="njContainer">
<div class="nav">
<ul>
<li>PHP generated links...</li>
<li>PHP generated links...</li>
<li>PHP generated links...</li>
</ul>
</div>
</div>
<button id="nhNavButton">NEW HAMPSHIRE</button>
<div id="nhContainer">
<div class="nav">
<ul>
<li>PHP generated links...</li>
<li>PHP generated links...</li>
<li>PHP generated links...</li>
</ul>
</div>
</div>
JQUERY:
$("#njContainer").hide();
$("#nhContainer").hide();
$("#njNavButton").click(function(){
$("#njContainer").show();
$("#nyContainer").hide();
$("#nhContainer").hide();
});
$("#nhNavButton").click(function(){
$("#nhContainer").show();
$("#nyContainer").hide();
$("#njContainer").hide();
});
$("#nyNavButton").click(function(){
$("#nyContainer").show();
$("#njContainer").hide();
$("#nhContainer").hide();
});
最佳答案
使用 not() 选择除所需元素之外的所有元素。然后您可以将它们组合成一个处理程序。
例如
$("#njContainer").hide();
$("#nhContainer").hide();
$(".button").click(function() {
$('.container').not($(this).next('.container').show()).hide();
});
JSFiddle: https://jsfiddle.net/TrueBlueAussie/b562v654/3/
.next('.container')关于jquery - 使用 JQuery 隐藏/显示 div 的更简单方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34858300/
相关文章：
jquery - 错误: Shell Form does not validate
javascript - 如何从span中选择子div中的前一个输入元素并绑定(bind)更改事件？
jquery - 如何将媒体查询附加到 <style> 标签？
python - 使用 python 从 javascript 标记中解析变量数据
javascript - 如何使用 jQuery 来显示和淡出元素？
javascript - jQuery.data() : set values from php
javascript - onchange 函数需要时间来刷新页面