위로 슬라이드하고 아래로 내림

Question

그룹 이름이있는 목록이 하나 있습니다.

<ul id="groups" > 
    <li id="group1" ></li> 
    <li id="group2" ></li> 
    <li id="group3"></li> 
</ul> 

슬라이딩 용기

<div id="containers" > 
    <ul id="container1" > 
     Lorem ipsum .. 
    </ul> 

    <ul id="container2" > 
      Lorem ipsum .. 
     </ul> 

    <ul id="container3" > 
      Lorem ipsum .. 
     </ul> 
    </div> 

당신이 hidding 기존의 컨테이너와 새를 보여주는 것입니다 그룹을 클릭하면 내가하고 싶은 것은

.

Answer 1

function hideAll() { 
    $("#container1 #containter2 #container3").hide(); 
} 

$("#group1").click(function(){ 
    hideAll(); 
    $("#container1").show(); 
} 

$("#group2").click(function(){ 
    hideAll(); 
    $("#container2").show(); 
} 

$("#group3").click(function(){ 
    hideAll(); 
    $("#container3").show(); 
} 

적은 수의 요소 만 사용하면 빠르고 잔인 할 수 있습니다. 당신이 더 많은 경우에, 당신은 등

Answer 2

$("#groups > *").live('click', function() { 
    var linkIndex=parseInt($(this).attr('id').match(/[0-9]+/)[0], 10); 
    $("#containers > *").slideUp('slow'); 
    $("#containers > *").filter(function() { 
     var containerIndex=parseInt($(this).attr('id').match(/[0-9]+/)[0], 10); 
     return containerIndex==linkIndex; 
    }).slideDown('slow'); 
}); 

클래스 ($(".container").hide();)에 일을 중단해야 당신은 (약간 수정) 버전 here을 시연 할 수 있습니다.