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

Question

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

演示: https://jsfiddle.net/vth4gn6w/2/

我想要什么:

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

希望有人可以帮助我，请使用 fiddle 向我展示它是如何完成的。谢谢

Answer 1

哪个元素被点击？不是整个#nav-mobile，而是里面的a。您希望 #nav-mobile a 作为您的选择器。

现在，ul 与其对应的 a 的关系在哪里(在回调函数中称为 $(this)) ？它们是直系 sibling ，因此 $(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>