Question

我在这里问了一个问题： jQuery how to make slideToggle applies one each item

我在这里得到了正确答案：FIDDLE

<div class="items">
    <div class="warp">
        <span class="change">Tester</span>
         <span class="click">expand</span>
    </div>
    <div class="invisible">
        <div class="red"> red </div>
        <div class="black"> black </div>
    </div>
</div>

<div class="items">
    <div class="warp">
        <span class="change">Tester</span>
         <span class="click">expand</span>
    </div>
    <div class="invisible">
        <div class="red"> red </div>
        <div class="black"> black </div>
    </div>
</div>

<div class="items">
    <div class="warp">
        <span class="change">Tester</span>
         <span class="click">expand</span>
    </div>
    <div class="invisible">
        <div class="red"> red </div>
        <div class="black"> black </div>
    </div>
</div>

jQuery的：

$(".warp").click(function () {
    var $warp = $(this);

    $warp.next(".invisible").slideToggle("slow", function () {
        if ($(this).is(':visible')) {
            $warp.removeClass('bg');
        }else{            
            $warp.find('span.click').css('visibility', 'visible');  
            $warp.addClass('bg');
        }
    });

    $warp.find('span.click').css('visibility', 'hidden');      
  });

我的问题是，当选择一个如何滑动切换其他invisible div

由于

Answer 1

只需选择:visible这样的可见元素：

var siblings = $warp.parent().siblings('.items').find('.invisible:visible')

siblings.slideToggle("slow", function () {
    var parent = $(this).prev('.warp');
    if ($(this).is(':visible')) {
        parent.removeClass('bg');
    }else{            
        parent.find('span.click').css('visibility', 'visible');  
        parent.addClass('bg');
    }
});

这是一个小提琴：http://jsfiddle.net/az8T7/4/

jQuery如何使slideToggle应用每个项目并在选择一个时隐藏其他项目

1 个答案: