Jquery悬停与单击可展开菜单
Jquery悬停与单击可展开菜单
提问于 2012-02-02 06:03:06
一个客户有一个用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，但都无济于事。
回答 2
Stack Overflow用户
发布于 2012-02-02 06:11:42
假设您只想通过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();Stack Overflow用户
发布于 2012-02-02 06:14:56
简单地将.hover()替换为.click()不起作用的原因是因为悬停事件需要两个函数，一个用于悬停，另一个用于悬停。.click()事件只接受一个函数。我假设你希望top函数作为你的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(){
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9104024
复制相关文章
相似问题
腾讯云开发者
