slideToggle帶有兩個以上菜單選項卡的雙滑塊

我寫了這段代碼，當只有2個菜單時它工作正常，但只要有3或4，slideToggle雙滑動（閃爍）。slideToggle帶有兩個以上菜單選項卡的雙滑塊

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(function() { 

    $('.menu').hide(); 

    $('#nav a').click(function(){ 
     var idvar = this.id; 
     var menuid = '#menu_'+idvar; 
     $('.menu').not(menuid).slideUp(function(){ 
      $(menuid).slideToggle(); 
     }); 
     return false; 
    }); 
}); 
</script></head><body> 

<div id="nav"> 
    <a href="#" id="dogs">Dogs</a> 
    <a href="#" id="cats">Cats</a> 
    <a href="#" id="horses">Horses</a> 
    <a href="#" id="cows">Cows</a> 
</div> 

<div class="menu" id="menu_dogs">stuff about dogs</div> 
<div class="menu" id="menu_cats">stuff about cats</div> 
<div class="menu" id="menu_horses">stuff about horses</div> 
<div class="menu" id="menu_cows">stuff about cows</div> 

</body></html>

看待這個問題的演示：（刪除任何兩個菜單，看看它的工作它是如何打算） http://jsfiddle.net/ANDXJ/

來源

2011-10-11 Adam Hunter Peck

像mrtsherman說的，你試圖滑動所有的菜單項，你只需要向上滑動可見的一個。爲了保持幻燈片向下滑動，我必須添加更多的邏輯。看看這個fiddle。

來源

2011-10-11 14:59:10

謝謝！這個答案成功地保持了按鈕切換幻燈片的功能，所以如果Cat已經打開，並且我點擊Cat按鈕，Cat就會關閉。 –

是的，我以爲你可能想要:-)代碼可以使用一些調整，但它涵蓋了所有場景。 –

這條線的問題是：

$('.menu').not(menuid).slideUp(function(){ 
    $(menuid).slideToggle(); 
});

你在說什麼是 - 對於不是當前菜單項的每個菜單項，請上移文本，然後向下滑動當前菜單項。這是執行多次。因此，你爲什麼會多次閃爍。你想這樣做一次。所以把它分成不同的陳述。向上滑動所有菜單。然後滑下當前的一個。

這裏 - 這應該做你想做的。

$('#nav a').click(function() { 
    var idvar = this.id; 
    var menuid = '#menu_' + idvar; 

    $('.menu').hide();   
    $(menuid).slideDown(); 
    return false; 
});

來源

2011-10-11 14:40:03 mrtsherman

感謝您解釋多次執行的問題。 –

slideToggle帶有兩個以上菜單選項卡的雙滑塊

回答

相關問題