Javascript Jquery悬停与单击可展开菜单

客户端有一个内置于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>

jQuery（'.nav add li.level0.nav li'）。悬停(
函数（）{
jQuery（this）.children（'.nav小部件：not（.inSlide），ul:not（.inSlide））.addClass（'inSlide'）.slideDown（700，function（）{
});
},
函数（）{
jQuery（this）.children（'.nav小部件，ul:not（.active'））.delay（'2000'）.slideUp（500，function（）{
jQuery（this.removeClass（'inSlide'）；
});
}
)
jQuery（'.nav小部件'）.hide（）；

现在，每当用户悬停在某个项目上时，它都会被设置为展开，但试图以这种方式导航是相当烦人的。是否可以修改此代码，使其在用户单击某个项目时展开

---

我尝试替换。将鼠标悬停在。单击或。鼠标悬停无效

假设您只想通过

单击来切换悬停行为，而不是
悬停
，您可以尝试以下操作

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

用.click（）替换.hover（）不起作用的原因是，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(){
    });
}

用.click（）替换.hover（）不起作用的原因是，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(){
    });
}

你想在<代码>点击<代码>时有什么行为？你想在<代码>点击<代码>时有什么行为？这不太管用，但我认为这是因为Magento中的菜单是根据你的产品类别动态生成的，当你点击主菜单项时导航到产品类别页面，而不是展开子菜单。为了让这个工作，我必须找到一种方法，使主要类别的项目不可检索。这可能就是为什么我没有看到其他人有真正的手风琴/可展开式菜单的原因。这不太管用，但我认为这是因为Magento中的菜单是根据您的产品类别动态生成的，当您单击主菜单项而不是展开子菜单时，会导航到产品类别页面。为了让这个工作，我必须找到一种方法，使主要类别的项目不可检索。这可能就是为什么我没有看到其他人有真正的手风琴/可扩展风格菜单的原因。