Jquery hover vs. click расширяемое меню

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>

Сейчас он настроен на расширение, когда пользователь наводит курсор на элемент, но этодовольно раздражает, пытаясь ориентироваться таким образом.Можно ли изменить этот код так, чтобы он расширялся, когда пользователь нажимает на элемент?

Я пытался заменить .hover на .click или .mouseup, но безрезультатно.

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 (), заключается в том, что событию hover нужны две функции: одна для onhover, другая для offhover. Событие .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(){
    });
}