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