jQuery切换不透明度具有相同的类答案

【问题标题】：jQuery toggle opacity with same classjQuery切换不透明度具有相同的类
【发布时间】：2014-02-19 21:40:37
【问题描述】：

我有 3 个 div 都属于同一类。每个 div 中都有一个 h3 和一个隐藏的 div，其中包含一个“内容”类。

如果在这些 div 中单击 h3，则会显示相应的“内容”div。

如果单击任何 h3 并且“内容”div 展开，则同级“示例”div 应该淡出到不透明度 0.5

当所有 'content' div 都关闭时，'example' div 不应淡出。

当所有“内容”div 都关闭时，我目前无法让“示例”div 不褪色。

CSS

.fade {opacity:0.5;}
.content {display:none;}

$(function () {
    $(".example .titlename").click(function () {
    $(this).closest('.example').find('.content').slideToggle(500);
    $(this).closest('.example').toggleClass('active').siblings().not('.active').css({ opacity: 0.5 });
    $(this).closest('.example').not('.active').css({ opacity: 0.5 });
    $(this).closest('.example.active').css({ opacity: 1.0 });
    });

});

HTML

<div class="example">
    <h3 class="titlename">Test titles 1</h3>
    <div class="content">content1</div>
</div>

<div class="example">
    <h3 class="titlename">Test titles 2</h3>
    <div class="content">content2</div>
</div>

<div class="example">
    <h3 class="titlename">Test titles 3</h3>
    <div class="content">content3</div>    
</div>

JSFiddle 在这里有示例代码：http://jsfiddle.net/Lgf4s/

感谢您的帮助！

【问题讨论】：

标签： jquery toggle each closest siblings

【解决方案1】：

需要在slideToggle的完整函数中检查是否所有的例子都关闭了

http://jsfiddle.net/Lgf4s/2/

$(this).closest('.example').find('.content').slideToggle(500, function() {
    // check if any example is active
    if(!$('.example').hasClass('active')) {
        $('.example').css('opacity', '1');
    }
});

我还清理了一些缓存一些 jquery 元素的地方

【讨论】：

【解决方案2】：

这里是你的解决方案...希望这会有所帮助..

$(function () {
    $(".example .titlename").click(function () {
        $(this).closest('.example').find('.content').slideToggle(500, function(){    
            if ($(".content:visible").size() == 0){
                $(".example, .titlename, .content").css({
                    opacity: 1
                    });
            }
        });
        $(this).closest('.example').toggleClass('active').siblings().not('.active').css({
            opacity: 0.5
        });
        $(this).closest('.example').not('.active').css({
            opacity: 0.5
        });
        $(this).closest('.example.active').css({
            opacity: 1.0
        });



    });

});

【讨论】：

【解决方案3】：

$(function () {
    $(".example .titlename").click(function () {
        $(this).closest('.example').find('.content').slideToggle(500);
        $(this).closest('.example').toggleClass('active').siblings().not('.active').css({
            opacity: 0.5
        });
        $(this).closest('.example').not('.active').css({
            opacity: 0.5
        });
        $(this).closest('.example.active').css({
            opacity: 1.0
        });

        if (!$('.example').hasClass('active')) 
            $('.example').css({ opacity: 1.0 });
    });

});

http://jsfiddle.net/Lgf4s/3/

【讨论】：

if语句需要在slidetoggle完成函数中

【解决方案4】：

你在代码中做了很多不必要的遍历——我也可以缓存一些选择器以获得更好的性能，但这就是我想出的——使用slideToggle()中的完整函数，以便在动画完成后进行所有检查

$(function () {
    $(".example .titlename").click(function () {           
        $(this).siblings('.content').slideToggle(500, function(){ // you can use siblings to get the content                
            $(this).closest('.example').toggleClass('active'); // just toggle current clicked                
            $('.example.active').css({opacity: 1.0});// make all active opacity 1                
            $('.example').not('.active').css({opacity: 0.5});// make all not active opacity .5                
            if(!$('.example.active').length){// if all not example divs don't have active class - make all opacity 1
                $('.example').css({opacity: 1.0});
            }
        });       
    });
});

FIDDLE

【讨论】：