如何解决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”的点击事件中
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。