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

简单地用.click（）替换.hover（）不起作用的原因是因为悬停事件需要两个函数，一个用于onhover一个用于offhover。 .click（）事件只需要一个函数。我假设你想要top函数作为你的点击事件。

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

Jquery悬停与单击可扩展菜单

2 个答案: