Question

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

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

我想要的是什么：

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

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

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作为选择器。

现在，ul与相应的a（回调函数中称为$(this)）相比在哪里？他们是直接的兄弟姐妹，所以$(this).next('ul')是你最好的选择。

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

您的代码现在应该是这样的。

＆＃13;

$(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();
    });
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

2 个答案: