jquery - 開いているものを閉じるslideToggleを作成する方法

Question

次の例があります。

http://jsfiddle.net/zidski/Vn9RD/

リンク 1 を開いてからリンク 2 をクリックした場合、リンク 1 を閉じるにはどうすればよいですか?

$('a.county').each( function(e){
    $(this).bind('click', function(e){ 
        var thisIs = $(this).index(); 
        $('.countystats').eq(thisIs).slideToggle(100); });
    });

Answer 1

あなたはこのトリッキーな方法を試すことができます.あなたのhtmlは好きになるでしょう...

<div id="1sub" class="sub">sub1</div>
<div id="2sub" class="sub">sub2</div>
<div id="3sub" class="sub">sub3</div>

<div id="stream-1" class="stream" style="display:none;">Stream 1</div>
<div id="stream-2" class="stream" style="display:none;">Stream 2</div>
<div id="stream-3" class="stream" style="display:none;">Stream 3</div>

今、jqueryで

$(".sub").click(function(){
var subClicked = $(this).attr('id');
$(".stream").hide();
$("#stream-" + subClicked.substring(0,1)).toggle();
});

Answer 2

最初に他のものを上にスライドさせてください：

$('.countystats').slideUp();
$('.countystats').eq(thisIs).slideDown(100);

Answer 3

操作したい現在の要素をキャプチャし、.not()を使用してそれを除外できます

$('a.county').bind('click', function (e) {
    var thisIs = $(this).index();
    var $el = $('.countystats').eq(thisIs); // element you want to toggle
    $el.slideToggle(100);
    $('.countystats').not($el).slideUp(100); // slide all the other ones up
});

FIDDLE

Answer 4

$('a.county').on('click',function(){
    $('.countystats').slideUp(300);
    $('.countystats').eq($(this).index()).slideDown(300);
});   

私はあなたのフィドルを更新しました。それもチェックしてください。http://jsfiddle.net/Vn9RD/3/

Answer 5

これを試して：

$("a.county").on("click", function(e) {     
    var target = $(this).data("div");   
    $(target).slideToggle("fast");
    $(".countystats").not(target).hide();
    e.preventDefault();   
});

ここで働くフィドル：http://jsfiddle.net/7TdSK/

役立つことを願っています。