jQuery如何使slideToggle每一项应用一个 [英] jQuery how to make slideToggle applies one each item

问题描述

如何使此切换淡入淡出应用于每个items块?当我单击任何人时，它将全部应用. 有人可以帮忙吗?谢谢

How can I make this toggle fadein fadeout applies on each itemsblock? when I click anyone, it applies all of them. Could someone please help ? Thanks

在线示例

Online Sample

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

推荐答案

如何使此切换淡入淡出应用于每个项目块? 当我单击任何人时，它将全部应用.

How can I make this toggle fadein fadeout applies on each itemsblock? when I click anyone, it applies all of them.

这是因为您使用$(".invisible")来选择所有类别为invisible的元素.您必须找到与切换元素(您的.warp元素)相关的元素，在您的情况下将是这样的:$warp.next(".invisible").

This is because you use $(".invisible") which selects all elements with the class invisible. You have to find the element related to your toggle element(your .warp element), which in your case would be like this: $warp.next(".invisible").

请参阅更新的 FIDDLE .

See the updated FIDDLE.

更新了您的jQuery代码:

Updated your jQuery code:

$(".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');      
});

这篇关于jQuery如何使slideToggle每一项应用一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！