jQuery悬停与单击展开菜单 [英] Jquery hover vs. click expandable menu

问题描述

客户有一个用Magento内置的网站，这部分的javascript控制菜单的显示方式:

A client has a site built in Magento, and there's this bit of javascript controlling how the menu is displayed:

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

现在，它设置为在用户将鼠标悬停在某个项目上时进行扩展，但是尝试以这种方式导航非常烦人.是否可以修改此代码，以便在用户单击某个项目时将其扩展?

Right now it's set to expand whenever the user hovers on an item, but it's rather annoying to try to navigate that way. Is it possible to modify this code so that it expands when a user clicks on an item?

我尝试将.hover替换为.click或.mouseup，但无济于事.

I tried replacing .hover with .click or .mouseup to no avail.

推荐答案

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

Assuming you just want to toggle the hover behavior by click instead of hover you can try something like this.

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

这篇关于jQuery悬停与单击展开菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！