菜單切換內容多次滑動

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