Jquery hover vs. click expandable menu

问题:

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?

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

回答1:

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

回答2:

The reason it doesn't work by simply replacing the .hover() with .click() is because the hover event needs two functions, one for onhover one for offhover. The .click() event only takes one function. I assume you want the top function as your click event.

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