2

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>

ある種のアコーディオンを作成する必要があります。アイデアは、キャプション付きのクラスimage-with-captionを使用して、見出しとdiv内の画像のみを表示することです。このコードを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;
});

問題は、クリックしたばかりのh3の下にあるクラスマスターでdivを表示するようにjQueryに指示する方法がわからないことです。残念ながら、HTMLコードを変更することはできません。このコードはCMSによって生成され、同じページに複数のdiv.portletがあるため、コードはそれらすべてに影響します。それが私が望んでいることです。

:(

4

1 に答える 1

0

$(this).parent('.portlet').find('.master').show();これをクリックイベントに追加できますh3

于 2011-05-26T15:28:13.217 に答える