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

Question

我为响应式网站创建了一个下拉菜单。但是我有一个小问题。当我单击第一个菜单选项卡时，所有选项卡都会打开。

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

我想要的：

当我单击第一个选项卡时，我只想打开该选项卡，而不会激活其他选项卡。
当我单击第二个选项卡时，我希望第一个选项卡自动关闭。

希望有人能帮助我，请用 fiddle 告诉我怎么做。谢谢

Answer 1

您需要修复您的 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 的菜单会展开。您可以按照此指南完成您想要的功能。

Answer 2

点击了哪个元素？不是整个 #nav-mobile，而是里面的 a。您希望 #nav-mobile a 作为您的 select 或。

现在，ul 与其对应的 a（在回调函数中称为 $(this)）的关系在哪里？他们是直系兄弟姐妹，因此 $(this).next('ul') 是您最好的选择。

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

您的代码现在应该如下所示。

$(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>

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

Javascript dropdown menu onclick, (close others, when one is open)

javascript

slidetoggle

drop-down-menu