Question

在我的页面的移动版本上，我有内容Feed的无限滚动机制。为了解决这个问题，我需要制作一个导航菜单，以便在用户滚动到某个偏移时显示并定位。

我能够做到这一点，除了我遇到切换菜单按钮和菜单内容的幻灯片转换时出现的问题。菜单似乎多次滑动（来回）。我附上了一个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

您的代码中发生的情况是，每次调用show_menu（）函数时都会为#menu添加一个click事件，每次在该偏移量上方滚动时都会触发该函数。因此，slideToggle的触发次数与添加的点击事件的次数相同。

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

在show_menu（）函数外添加click事件。（最好将它放在$（document）.ready或window.load（））

或

使用 event delegation 或jQuery .bind()＆amp; .unbind(）功能。像这样：
```
$("#menu").bind("click",function(){
        $("#contents").slideToggle();
});
```
并在调用show_menu（）之前使用unbind删除菜单按钮的所有绑定点击事件处理程序：
```
$("#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();
   });

菜单切换内容多次滑动

2 个答案: