Question

我正在尝试创建一个jQuery下拉菜单，它会添加一个类来知道它是向下还是向上。但由于某种原因，.on（）函数似乎没有响应点击。我做错了什么？

这是我的HTML：

<ul id="main-menu" class="menu">
    <li>
        <a href="http://example.com">Item 1</a>
    </li>
    <li class="drop-down">
        <a href="http://example.com">Item 2</a>
        <ul class="sub-menu">
            <li>
               <a href="http://example.com">Sub Item 1</a>
            </li>
            <li>
               <a href="http://example.com">Sub Item 2</a>
            </li>
            <li>
               <a href="http://example.com">Sub Item 3</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="http://example.com">Item 3</a>
    </li>
</ul>

我的JS：

// Slide down
jQuery('#main-menu > li.drop-down > a').not('.active a').click(function(e){
    e.preventDefault();
    jQuery(this).closest('li.drop-down').addClass('active').find('ul.sub-menu').slideDown();
});

// Slide up
jQuery('#main-menu > li.drop-down.active > a').on('click', function(e){
    e.preventDefault();
    jQuery(this).closest('li.drop-down').find('ul.sub-menu').slideUp(400, function(){
        jQuery(this).closest('li.drop-down.active').removeClass('active');
    });
});

谢谢！

Answer 1

为什么不使用Superfish插件？

Answer 2

您不需要2个处理程序来实现您的目标。

您可以使用一个使用toggleClass和slideToggle jQuery方法的处理程序。

// Slide down
jQuery('#main-menu').on('click', 'li.drop-down > a', function(e){
    e.preventDefault();
    jQuery(this)
    .closest('li.drop-down')
    .toggleClass('active')
    .find('ul.sub-menu')
    .slideToggle(400, function(){
         if($(this).is(':hidden')){
              jQuery(this).closest('li.drop-down.active').removeClass('active');
         }
    });
});

参考文献： .toggleClass()，.slideToggle()

使用jQuery .on（）创建一个下拉菜单

2 个答案: