Question

我正在尝试使用jquery创建一个下拉列表;但是当我点击任何一个带下拉菜单的菜单时;所有下拉菜单都打开了。这是我的代码：

    $('.has-dropdown').on('click', function() {
        if(!$('.nav-dropdown').is(':visible')){
            $(".nav-dropdown" ).slideDown();
            var $this = $(this);
            $this.toggleClass('is-active').children('ul').toggleClass('is-visible');
        } else {
            $(".nav-dropdown" ).slideUp();
            var $this = $(this);
            $this.toggleClass('is-active').children('ul').toggleClass('is-visible');
        }
    });

HTML代码：

    <ul class="nav-menu menu">
                      <li class="menu-item has-dropdown">
                            <a href="#!" class="menu-link dropdown">Home Pages</a>
                                <ul class="nav-dropdown">
                                     <li class="menu-item"> <a href="index.html" class="menu-link">Home v1</a> </li>
                                     <li class="menu-item"> <a href="index_2.html" class="menu-link">Home v2</a></li>
                                </ul>
                      </li>
                      <li class="menu-item has-dropdown">
                            <a href="#!" class="menu-link">Product Page</a>
                                <ul class="nav-dropdown">
                                     <li class="menu-item"> <a href="product.html" class="menu-link">Product List v1</a> </li>
                                     <li class="menu-item"> <a href="index_2.html" class="menu-link">Product List v2</a></li>
                                </ul>
                      </li>
                      <li class="menu-item"> <a href="#!" class="menu-link">Contact</a> </li>
                      <li class="menu-item"> <a href="#!" class="menu-link">About</a> </li>
             </ul>

Answer 1

这是因为您定位的是.nav-dropdown元素。你只需要找到当前li中的元素：

  $(this).closest('li').find('.nav-dropdown').slideDown();

完整代码：

$('.has-dropdown').on('click', function() {
    var currentnav=$(this).closest('li').find('.nav-dropdown');
    if(!currentnav.is(':visible')){
        currentnav.slideDown();
        var $this = $(this);
        $this.toggleClass('is-active').children('ul').toggleClass('is-visible');
    } else {
        currentnav.slideUp();
        var $this = $(this);
        $this.toggleClass('is-active').children('ul').toggleClass('is-visible');
    }
});

Jquery下拉菜单;全部点击打开

1 个答案: