Javascript下拉菜单onclick，（关闭其他人，当一个是打开的）

我创建了响应式网站的下拉菜单。但我有一个小问题。当我点击第一个菜单标签时，所有标签打开。Javascript下拉菜单onclick，（关闭其他人，当一个是打开的）

DEMO:https://jsfiddle.net/vth4gn6w/2/

我想要什么：

当我点击第一个选项卡上，我想只有标签页中打开，没有它激活其他选项卡。
当我点击第二个选项卡时，我想让第一个选项卡自动关闭。

希望有人能帮助我，并且请用小提琴向我展示它是如何完成的。谢谢

来源

2016-10-24 Bel

这将有助于包括代码作为你的问题的一个片段。 – darrylyeo

哪个元素被点击？不是整个#nav-mobile，而是a里面。你想要#nav-mobile a作为你的选择。

现在，ul s在哪里与它们对应的a（简称$(this)里面的回调函数）有关？他们是直系兄弟姐妹，所以$(this).next('ul')是你最好的选择。

要关闭所有其他菜单项，请将ul保存在变量中，并使用.not()选择其他ul s。

您的代码现在应该看起来像这样。

$(document).ready(function() { 
 
    $('#nav-mobile ul').hide(); 
 
    $('#nav-mobile a').click(function(e) { 
 
     e.preventDefault(); 
 
     var $menuItem = $(this).next('ul'); 
 
     $menuItem.slideToggle(); 
 
     $('#nav-mobile ul').not($menuItem).slideUp(); 
 
    }); 
 
});

#tab1, #tab2, #tab3{ 
 
    background-color:grey; 
 
    color:white; 
 
    padding:5px 10px; 
 
    display:block; 
 
    width:100px; 
 
    border-bottom:1px solid; 
 
} 
 

 
#tab1:hover, #tab2:hover, #tab3:hover{ 
 
    background-color:darkgrey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="nav-mobile"> 
 
    <a href="#" id="tab1">Products</a> 
 
    <ul style="display: none;"> 
 
     <li><a href="index.php">Home</a></li> 
 
     <li><a href="#">Why Us</a></li> 
 
     <li><a href="#">Our Work</a></li> 
 
    </ul> 
 
    <a href="#" id="tab2">About</a> 
 
    <ul style="display: none;"> 
 
     <li><a href="#">Our Equipment</a></li> 
 
     <li><a href="#">Video Production</a></li> 
 
    </ul> 
 
    <a href="#" id="tab3">Contact</a> 
 
    <ul style="display: none;"> 
 
     <li id="last-child"><a href="#">Contact</a></li> 
 
     <li id="last-child"><a href="#">Social Media</a></li> 
 
    </ul> 
 

 
</div>

来源

2016-10-24 20:41:07 darrylyeo

谢谢。有用。但是，当我尝试再次关闭其中一个选项卡时，它会自动打开。你知道如何解决这个问题吗？ @darrylyeo – Bel

编辑我的答案。 – darrylyeo

哇的人。你是最棒的！！谢谢sooo soo bro – Bel

您需要修复您的js，因此它不会滑动切换整个导航对象。

https://jsfiddle.net/vth4gn6w/2/#&togetherjs=0vaEOk1NNT

$(document).ready(function() { 

    $('#nav-mobile ul').hide(); 
    $('#tab1').click(function(e) { 
     e.preventDefault(); 
     $('#tab1ul').slideToggle(); 
    }); 

});

我设置你的例子为TAB1所以当你点击第一个选项卡只有我创建的ID tab1ul扩展菜单。你可以按照这个指导来完成你想要的功能。

来源

2016-10-24 20:22:49

Javascript下拉菜单onclick，（关闭其他人，当一个是打开的）

回答

相关问题