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

问题描述

| 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内显示带标题图像类的标题和图像。我在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\" />\');
 }

我得到这样的东西：

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

当我单击标题时，它应该向我展示由jQuery创建和隐藏的新div，但是我不知道该怎么做。 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，所以该代码会影响所有这些代码，这就是我想要的。 :(     

解决方法

您可以将此“ 4”添加到“ 5”的点击事件中