菜单多次切换内容幻灯片

Menu toggle contents slides multiple times

本文关键字：幻灯片 菜单      更新时间：2023-09-26

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

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

代码中发生的情况是，每次调用show_menu（）函数时，都会为#菜单添加一个点击事件，每次滚动到该偏移上方时都会触发该事件。因此，滑动切换的触发次数与添加的单击事件的触发次数一样多。

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

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

或

  1. 使用事件委派或jQuery.bind（）&unbind（）函数。像这样：

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

    并在调用show_menu（）之前使用unbind来删除菜单按钮的所有绑定点击事件处理程序：

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

    编辑：使用绑定和解除绑定更新fiddle

更改您的：

$(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();
   });
相关文章：