jQuery-在另一个元素内部显示/隐藏该元素，并在该元素外部单击

HTML:

博客
这里有一些文字

我需要创作一种手风琴。这样做的目的是只显示标题线和div内的图像以及带有标题的类图像。我在jQuery中编写了这段代码，用于包装图像div下面的所有内容并将其隐藏：

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

var$createDiv=$（'.image with caption'）.nextAll（）；
对于（变量i=0，len=$createDiv.length；i

我得到了这样的结果：

 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" />');
 }

。。。
这里有一些文字





...

当我点击标题时，它应该会显示jQuery创建和隐藏的新div，但我不知道如何才能做到这一点

jQuery代码：

...
<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>
...

var$createDiv=$（'.image with caption'）.nextAll（）；
对于（变量i=0，len=$createDiv.length；i

问题是，我真的不知道如何告诉jQuery在我刚才单击的h3下面用class master显示div。不幸的是，我无法更改HTML代码，因为此代码是由CMS生成的，并且我在同一个页面中有几个div.portlet，因此代码将影响所有的div.portlet，这就是我想要的

---

：（

您可以将此

$（this）.parent（'.portlet'）.find（'.master'）.show（）；

添加到

h3

的点击事件中。您可以将此

$（this）.parent（'.portlet'）.find（'.master'）.show（）；

添加到

h3

的点击事件中。您可以提供小提琴吗？您可以提供小提琴吗？

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