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

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

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