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

무슨 말을 is - 현재 메뉴가 아닌 모든 메뉴 항목에 대해 텍스트를 슬라이드 한 다음 현재 메뉴 항목을 아래로 슬라이드합니다. 이것은 여러 번 실행됩니다. 그러므로 여러 번 깜박이는 이유입니다. 당신은 이것을 한 번하고 싶습니다. 그래서 다른 문장으로 분리하십시오. 모든 메뉴를 위로 이동하십시오. 그런 다음 현재 슬라이드를 내립니다.

여기 - 원하는대로해야합니다.

$('#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 두 개 이상의 메뉴 탭이있는 두 번 슬라이드

답변

관련 문제