#jquery #content-management-system #accordion #slidedown #slideup
#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 с классом 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>
...
Когда я нажимаю на заголовок, он должен показать мне новый 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 отобразить div с классом master ниже h3, который я только что щелкнул. К сожалению, я не могу изменить HTML-код, поскольку этот код генерируется CMS, и у меня есть несколько div.portlet на одной странице, поэтому код повлияет на все из них, и это то, что я хочу.
🙁
Комментарии:
1. Не могли бы вы, пожалуйста, предоставить скрипку?
Ответ №1:
Вы могли бы добавить это $(this).parent('.portlet').find('.master').show();
к событию щелчка для h3