菜单切换内容多次滑动

Question

在我的页面的移动版本上，我拥有内容馈送的无限滚动机制。为了解决这个问题，我需要制作一个导航菜单，当用户滚动到某个偏移量时，它将显示并定位到固定的位置。

我能够做到这一点，除了我遇到菜单内容的切换菜单按钮和幻灯片切换时发生的问题。看起来菜单滑动多次（来回）。我附上了一个jsFiddle链接来模拟我的问题。

HTML：

<div id="menubar"> 
    <div id="menu"> 
    </div>  
</div> 
<div id="contents"> 
    <a>item 1</a> 
    <a>item 2</a> 
</div> 

jQuery脚本：

$(window).scroll(function (event) { 
    if($(window).scrollTop() > 100){     
     show_menu(); 
    } 
    else{ 
     hideAll(); 
    } 
}); 

function show_menu(){ 
    $("#menubar").show(); 
    $("#menu").click(function(){ 
     $("#contents").slideToggle(); 
    }); 
} 
function hideAll(){ 
    $("#menubar").hide(); 
    $("#contents").hide(); 
} 

Problem simulation in jsFiddle

Answer 1

在你的代码会发生什么事是你每次调用时添加的#menu click事件show_menu（）函数每次在该偏移量之上滚动时触发。因此，slideToggle被触发的次数与添加的点击事件的次数相同。

为了防止这种情况，您可以：

1. 添加单击事件show_menu（）函数之外。 （最好把它的内部$（文件）。就绪或window.load（））

或

使用event delegation或jQuery的.bind() & .unbind(）函数。就像这样：

$("#menu").bind("click",function(){ 
     $("#contents").slideToggle(); 
}); 

和使用电话show_menu之前解除绑定（）删除所有绑定的单击事件处理程序菜单按钮：

$("#menu").unbind("click"); 

EDIT: Updated fiddle using bind and unbind

Answer 2

改变你：

$(window).scroll(function (event) { 
    if($(window).scrollTop() > 100){     
     show_menu(); 
    } 
    else{ 
     hideAll(); 
    } 
}); 

到

$(window).scroll(function (event) { 
    if($(window).scrollTop() > 100){ 
     $("#menu").unbind("click");    
     show_menu(); 
    } 
    else{ 
     hideAll(); 
    } 
}); 

和

$("#menu").click(function(){ 
     $("#contents").slideToggle(); 
    }); 

到

$("#menu").bind('click',function(){ 
     $("#contents").slideToggle(); 
    }); 

或

$("#menu").on('click',function(){ 
     $("#contents").slideToggle(); 
    });