jQuery的 - 顯示/隱藏元素

Question

HTML的另一個元素內的元素並單擊外：

<div class="portlet"> 
<h3 class="">Blogs</h3> 
<div class="portlet-content"> 
    <div class="teaser"> 
     <div class="image-with-caption"> 
      <img src="blogs1_peq.jpg" alt=""> 
     </div> 
     <p> Some text here </p> 
     <ul class="link-list"> 
      <li xmlns:fofx="urn:FunctionObjectForXsl" class="newwindow"><a href="http://theenergycollective.com/" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">The Energy Collective</a></li> 
      <li xmlns:fofx="urn:FunctionObjectForXsl" class="newwindow"><a href="http://sustainablecitiescollective.com/" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">Sustainable Cities Collective</a></li> 
     </ul> 
    </div> 
</div> 

我需要創造一種手風琴。這個想法是隻顯示帶有類圖像和標題的div內的headeline和圖像。我做了jQuery中的代碼包一切波紋管的圖像div和隱藏：

var $createDiv = $('.image-with-caption').nextAll(); 
for(var i=0, len = $createDiv.length; i < len; i+=2){ 
    $createDiv.slice(i, i+2).wrapAll('<div class="master" />'); 
} 

我得到這樣的：

... 
<div class="image-with-caption"> 
    <img src="blogs1_peq.jpg" alt=""> 
</div> 
<div class="master"> 
    <p> Some text here </p> 
    <ul class="link-list"> 
     <li xmlns:fofx="urn:FunctionObjectForXsl" class="newwindow"><a href="http://theenergycollective.com/" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">The Energy Collective</a></li> 
     <li xmlns:fofx="urn:FunctionObjectForXsl" class="newwindow"><a href="http://sustainablecitiescollective.com/" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">Sustainable Cities Collective</a></li> 
    </ul> 
</div> 
... 

當我點擊標題就應該告訴我新的div由jQuery創建和隱藏，但我無法弄清楚我該如何做到這一點。

jQuery代碼：

var $createDiv = $('.image-with-caption').nextAll(); 
for(var i=0, len = $createDiv.length; i < len; i+=2){ 
    $createDiv.slice(i, i+2).wrapAll('<div class="master" />'); 
} 
$('.master').hide(); //Hide/close all containers 


//On Click 
$('.portlet h3').click(function(){ 
    if($(this).nextAll().is(':hidden')) { 
     $(this).removeClass('active').next().siblings().next().slideUp(); 
     $(this).toggleClass('active').next().siblings().next().slideDown(); 
    } else { 
     $(this).removeClass('active').siblings().next().siblings().slideUp(); 
    } 
    return false; 
}); 

的問題是，我真誠地不知道如何告訴jQuery的帶班師傅波紋管我只是點擊了H3顯示DIV。不幸的是，我無法更改HTML代碼，因爲此代碼是由CMS生成的，並且我在同一頁面中有多個div.portlet，因此代碼將影響所有這些代碼，而這正是我想要的。

:(

Answer 1

您可以添加此$(this).parent('.portlet').find('.master').show();爲h3