jQuery悬停与单击展开菜单

Question

客户有一个用Magento内置的网站，下面的javascript控制菜单的显示方式：

<script type="text/javascript">

jQuery('.nav-add li.level0, .nav li').hover(
function(){
    jQuery(this).children('.nav-widget:not(.inSlide), ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){

    });
},
function(){
    jQuery(this).children('.nav-widget, ul:not(.active)').delay('2000').slideUp(500,function(){
        jQuery(this).removeClass('inSlide');
    });
}
)
jQuery('.nav-widget').hide();

</script>

现在，它设置为每当用户将鼠标悬停在某个项目上时都会扩展，但是尝试以这种方式导航很烦人。 是否可以修改此代码，以便在用户单击某个项目时将其扩展？

我试图用.click或.mouseup替换.hover无济于事。

Answer 1

假设您只想通过click而不是将hover来切换悬停行为，则可以尝试这样的操作。

jQuery('.nav-add li.level0, .nav li').click(function(){
    if(!$(this).data('clicked')){
       jQuery(this)
       .data('clicked', true)
       .children('.nav-widget:not(.inSlide), ul:not(.inSlide)')
       .addClass('inSlide')
       .slideToggle(700,function(){

       });
    }
    else{
       jQuery(this)
       .data('clicked', false)
       .children('.nav-widget, ul:not(.active)')
       .delay('2000')
       .slideUp(500,function(){
            jQuery(this).removeClass('inSlide');
       });
    }
});
jQuery('.nav-widget').hide();

Answer 2

仅将.hover（）替换为.click（）不能起作用的原因是，悬停事件需要两个函数，一个用于悬停，一个用于悬停。 .click（）事件仅具有一个功能。 我假设您希望将top函数用作您的click事件。

jQuery('.nav-add li.level0, .nav li').click(
    function(){
        jQuery(this).children('.nav-widget:not(.inSlide),
        ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
    });
}