0

ユーザーが「展開 [+]」をクリックしたときに折りたたんで展開したいページに多数の div があります。

次のコードは、1 つの div に対して機能します

<h4 class="expanderHead" style="cursor:pointer;">Contact information <span class="expanderSign">Expand [+]</span></h4>
<div id="profile-section" style="overflow:hidden;">
some stuff
</div>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".expanderHead").click(function(){
    if (jQuery(".expanderSign").text() == "Expand [+]")
    {
    jQuery("#profile-section").removeClass("height-min");
    jQuery("#profile-section").addClass("height-auto");
    }
    else
    {
    jQuery("#profile-section").removeClass("height-auto");
    jQuery("#profile-section").addClass("height-min");
    }

    if (jQuery(".expanderSign").text() == "Expand [+]"){
        jQuery(".expanderSign").text("Collapse [-]");
    }
    else {
        jQuery(".expanderSign").text("Expand [+]");
    }


});
});
</script>

ページに多数の div がある場合

<h4 class="expanderHead" style="cursor:pointer;">Contact information <span class="expanderSign">Expand [+]</span></h4>
<div id="profile-section1" style="overflow:hidden;">
some stuff
</div>

<h4 class="expanderHead" style="cursor:pointer;">Contact information <span class="expanderSign">Expand [+]</span></h4>
<div id="profile-section2" style="overflow:hidden;">
some stuff
</div>

<h4 class="expanderHead" style="cursor:pointer;">Contact information <span class="expanderSign">Expand [+]</span></h4>
<div id="profile-section3" style="overflow:hidden;">
some stuff
</div>

etc....

これらすべての div で個別に機能するように jquery を変更するにはどうすればよいですか。つまり、クリックされた div のみを最小化または最大化しますか?

(this) と parent() と child() を使用してさまざまな組み合わせを試しましたが、うまくいかないようです。

助けていただければ幸いです:)

4

4 に答える 4

1

jqueryセレクターでコンテキストを使用して、現在のイベントソースの下にある要素にアクセスします。

構文： jQuery（セレクター[、コンテキスト]）

変化する

jQuery(".expanderSign").text()

に

jQuery(".expanderSign", this).text()
于 2013-02-27T10:47:32.857 に答える
0

$(this)クリックしたdivをターゲットにするために使用する必要があります。

例：

$(".expanderHead").on('click', function(){
   $(this).hide();
});

この場合、クリックするdivは消えます。

使用する.on()のではなく.click()。

于 2013-02-27T10:48:27.847 に答える
0

トグルを使用して次の div をターゲットにすることで、次のように単純化できます。

<h4 class="expanderHead">Contact information <span class="expanderSign" style="cursor:pointer;">[+]</span></h4>
<div class="expanderContent">some stuff</div>

$(".expanderContent").hide();
$(".expanderSign").on('click', function () {
    $(this).text($(this).text() == '[+]' ? '[-]' : '[+]');
    $(this).parent().next("div").toggle();
});

例

于 2013-02-27T10:55:58.227 に答える
0

すべての提案をありがとう。結局、私はアコーディオンに行きました - http://jqueryui.com/accordion/

私が最初に求めていたものとは正確には異なりますが、うまく機能します。

于 2013-03-08T06:28:30.620 に答える