jQuery切換同一類的不透明度

Question

我有3個div都具有相同的類。在每個div內是一個h3和一個隱藏的div，其中有一類「內容」。

如果在任何這些div中單擊了h3，則會顯示相應的'content'div。

如果任何H3被點擊，然後將「內容」的div擴展兄弟「示例」的div應該淡出到不透明度0.5

當所有「內容」的div被關閉，則「示例」的div不應該淡出。

當我關閉所有'content'div時，我目前無法獲得'example'div。

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/

任何幫助感激地接受！

Answer 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的元素

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



    }); 

}); 

Answer 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/

Answer 4

你在你的代碼做了很多uneccessary穿越的 - 我可能還緩存某些選擇有更好的表現，但是這是我想出了 - 在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