У меня есть 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/
Любая помощь с благодарностью принимается!
Вам нужно проверить, закрыты ли все примеры в полной функции slideToggle
$(this).closest('.example').find('.content').slideToggle(500, function() {
// check if any example is active
if(!$('.example').hasClass('active')) {
$('.example').css('opacity', '1');
}
});
Я также очистил его немного, кэшируя некоторые элементы jquery
$(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 });
});
});
вот ваше решение... надеюсь, это поможет..
$(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
});
});
});
Вы выполняете много необработанного прохождения кода - я мог бы также кэшировать некоторые селекторы для лучшей производительности, но это то, что я придумал, - используя полную функцию в 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});
}
});
});
});