如何同时防止滑动和滑动子菜单?我的导航有一个菜单,其中一个菜单有子菜单。当我点击有子菜单的菜单时,子菜单打开,关闭大约2次,最后关闭,但只有一次点击。它发生在移动设备上。请看看我的代码
<ul class="nav-menu align-right">
<li class="current"><a href="index.html#header">home</a></li>
<li><a href="index.html#about-us">about us</a></li>
<li>
<a href="#" class="extra">Extra</a>
<ul>
<li><a href="blog-three.html">blog grid 3</a></li>
<li><a href="blog-four.html">blog grid 4</a></li>
</ul>
</li>
<li><a href="index.html#contact">contact</a></li></li>
</ul>
$(window).on('load resize', function(){
if($(window).width() < 1000){
$('.nav-menu li a').click(function(e) {
e.preventDefault();
$(this).next('ul').slideToggle(200, 'easeInExpo');
$(this).parent().siblings().find('ul').slideUp(200, 'easeInExpo');
});
}
})
答案 0 :(得分:0)
每次调整窗口大小时都会绑定事件,因此它们会触发多次。如果您对此进行渐变,则它应该有效JSFIDDLE
$(window).on('load', function(){
$('.nav-menu li a').click(function(e) {
if($(window).width() < 1000){
e.preventDefault();
$(this).next('ul').slideToggle(200, 'easeInExpo');
$(this).parent().siblings().find('ul').slideUp(200, 'easeInExpo');
}
});
})
答案 1 :(得分:0)
您多次绑定事件!每次页面调整大小时,您都会继续添加点击事件。所以他们会继续打桩。
如果您打算以这种方式进行,您需要取消绑定事件。
$(window).on('load resize', function(){
$('.nav-menu li a').off("click"); //there are better ways, but it will work
if($(window).width() < 1000){
$('.nav-menu li a').click(function(e) {
/* rest of logic */
});
}
});
其他选项是绑定一次并在click方法中进行宽度检查。
$(function(){
$('.nav-menu li a').click(function(e) {
if($(window).width() >= 1000) return true;
/* rest of logic */
});
});
答案 2 :(得分:0)
因为在加载和调整大小时你绑定了click方法所以它将绑定两次。最好只使用一种方法。如果你每次调整大小时都在重新调整大小,那么它将一次又一次地绑定