jQuery переключает непрозрачность с тем же классом

Question

jQuery переключает непрозрачность с тем же классом

0

У меня есть 3 divs с одним классом. Внутри каждого div есть h3 и скрытый div с классом "content".

Если h3 щелкнут в любом из этих div, то отображается соответствующий div 'content'.

Если какой-либо h3 щелкнут, а div 'content' будет расширяться, то синглы 'example' divs должны исчезнуть до непрозрачности 0.5

Когда все "контентные" divs закрыты, то "примерные" divs не должны исчезать.

В настоящее время я не могу заставить "примеры" divs не исчезать, когда все "контентные" divs закрыты.

CSS

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

JS

$(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/

Любая помощь с благодарностью принимается!

Catherine Allen 19 фев. 2014, в 22:44

Источник

Теги:

jquery

each

toggle

siblings

closest

4 ответа

0

$(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/

HOKBONG 19 фев. 2014, в 20:22

0

Оператор if должен быть в функции завершения ползунка
Huangism 19 фев. 2014, в 21:58

0

вот ваше решение... надеюсь, это поможет..

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



    });

});

Gromish 19 фев. 2014, в 19:41

0

Вы выполняете много необработанного прохождения кода - я мог бы также кэшировать некоторые селекторы для лучшей производительности, но это то, что я придумал, - используя полную функцию в 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

ᾠῗᵲᄐᶌ 19 фев. 2014, в 19:25

Ещё вопросы

Оператор if должен быть в функции завершения ползунка

Huangism · Accepted Answer · 2014-02-19T19-39-00.000Z

Вам нужно проверить, закрыты ли все примеры в полной функции 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