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>
我需要创建一种 Accordion 。这个想法是只显示标题和 div 内带有 image-with-caption 类的图像。我在 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>
...
当我单击标题时,它应该显示由 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 下方显示带有 class master 的 div。不幸的是,我无法更改 HTML 代码,因为该代码是由 CMS 生成的,并且我在同一页面中有多个 div.portlet,因此该代码将影响所有这些,这就是我想要的。
:(
最佳答案
您可以将这个 $(this).parent('.portlet').find('.master').show();
添加到 h3< 的点击事件中
关于jQuery - 显示/隐藏另一个元素内部的元素并单击该元素外部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6140365/