菜单切换内容幻灯片多次

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();
}

jsFiddle中的问题模拟

Answer 1

代码中的情况是，每次调用show_menu()函数时，都会为#菜单添加一个单击事件，每次在偏移量上方滚动时都会触发该函数。因此，slideToggle被触发的次数与添加的单击事件相同。

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

1. 在show_menu()函数之外添加单击事件。(最好放在$(document).ready或window.load()中)

或

1. 使用事件委托或jQuery .bind() & .unbind()函数。如下所示： $(“#菜单”).bind(“单击”，函数(){ $("#contents").slideToggle()；})； 并在调用show_menu()之前使用取消绑定来删除菜单按钮的所有绑定单击事件处理程序： $(“#菜单”).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();
   });