javascript - jQueryのslideToggleの作成方法は、各項目に1つずつ適用されます

Question

itemsこのトグル フェードイン フェードアウトを各ブロックに適用するにはどうすればよいですか? 誰かをクリックすると、それらすべてが適用されます。誰か助けてくれませんか？ありがとう

オンラインサンプル

     <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

 $('.invisible').hide();
 $('.warp').addClass('bg');

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

              $('span.click').css('visibility', 'visible');  
              $('.warp').addClass('bg');
            }
         });

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

Answer 1

このトグル フェードイン フェードアウトを各アイテム ブロックに適用するにはどうすればよいですか? 誰かをクリックすると、それらすべてが適用されます。

これは$(".invisible")、 class ですべての要素を選択する which を使用するためですinvisible。トグル要素（要素）に関連する要素を見つける必要があり.warpます。あなたの場合は次のようになります$warp.next(".invisible")。

更新されたFIDDLEを参照してください。

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

Answer 2

ここ：jsfiddle

jquery:

$('.invisible').hide();
$(".warp").click(function () {
        $(this).next('div').slideToggle("slow", function () {
            $(this).prev('div').toggleClass('bg');
            $(this).prev('div').find('.click').slideToggle("fast", function () {});
        });
});