スライドアップしてスライドする

Question

私はグループ名で1つのリストを持っています。

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

素早く残忍ですが、少数の要素がある場合は機能します。あなたはより多くを持っている場合は、クラス（$(".container").hide();）に物事を破る必要がある、など

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

あなたは（わずかに変更された）バージョンhereをデモすることができます。