我想知道如何改进这段代码? 我在导航中有 3 个菜单按钮。第一个默认是激活的。单击时,其他按钮会分配有事件类。
<div class="mobile-nav">
<ul>
<li><input class="mobile-nav-tab active" id="search-tab" type="button"/></li>
<li><input class="mobile-nav-tab" id="menu-tab" type="button"/></li>
<li><input class="mobile-nav-tab" id="members-tab" type="button"/></li>
</ul>
</div>
这些按钮中的每一个都会显示特定的 div 并隐藏其他的。
<div class="mobile-nav-content">
<div id="search">
</div>
<div style="display:none" id="menu">
<br>menu
<br>menu
</div>
<div style="display:none" id="members">
<br>members
<br>members
</div>
</div>
我有这段代码,它运行良好。
$(document).ready(function(){
$('.mobile-nav-tab').click(function(){
$('.mobile-nav-tab').removeClass('active');
$(this).addClass('active');
if ($('#search-tab').hasClass('active')){
$('#search').slideDown();
}
else{
$('#search').hide();
}
if ($('#menu-tab').hasClass('active')){
$('#menu').slideDown();
}
else{
$('#menu').hide();
}
if ($('#members-tab').hasClass('active')){
$('#members').slideDown();
}
else{
$('#members').hide();
}
});
});
我发现我可以用三元运算符简写 if-else 部分。 但我想知道有没有其他方法可以改进它并使其更短?
最佳答案
这应该大大缩短它:
$(".mobile-nav-tab").click(function() {
var parts = this.id.split("-");
$(".mobile-nav-content").children().slideUp();
$('.mobile-nav-tab').removeClass('active');
$(this).addClass("active");
$("#" + parts[0]).slideDown();
});
关于javascript - 改进 JavaScript - 用于事件菜单和显示/隐藏 div 的 jQuery 代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15884880/