-1

ASP.Net、2.0 VS2005、.Net 2.0 jQuery 1.8.3、jQuery UI 1.9.2

フォームには2つのパネルがあり（後で詳しく説明します）、ユーザーの要求に応じて開くことも閉じることもできます。

私はjQueryの'.slideToggle'メソッドを使用しています。

これは私のマークアップです

<div class="trigger0">Collapsible Header 1 - Click to toggle</div>
            <div class="panel0">
                content 1
            </div>
           <div class="trigger1">Collapsible Header 2 - Click to toggle</div>
            <div class="panel1">
                content 2
            </div>

以下は正常に動作します

$(document).ready(function() {
        $(".trigger0").click(function(){
            $(".panel0").slideToggle("medium");
        });
        $(".trigger1").click(function() {
            $('.panel1').slideToggle("medium");
        });
    });

しかし、これはしません

$(document).ready(function() {
        for (var vReportSectionCount = 0; vReportSectionCount < 2; vReportSectionCount++)
        {
            $(".trigger" + vReportSectionCount).click(function(){
                $(".panel" + vReportSectionCount).slideToggle("medium");
            });
        }
    });

最終的にいくつのパネルが存在するかはまだわからないので、パネルごとに新しい行を書く必要はありません。誰かが私に理由を説明し、より良い解決策を提案できますか？

4

2 に答える 2

5

これはあなたが探しているものでしょうか？これにより、クラスにIDではなくクラスとして名前を付けることができます

HTML

<div class="trigger">Collapsible Header 1 - Click to toggle</div>
<div class="panel">
    content 1
</div>

<div class="trigger">Collapsible Header 2 - Click to toggle</div>
<div class="panel">
    content 2
</div>

Javascript

$(document).ready(function() {
    $(".trigger").click(function(){
        $(this).next(".panel").slideToggle("medium");
    });
});

ここでデモを見ることができます：http：//jsfiddle.net/LkTf8/1/

于 2012-12-19T15:09:13.547 に答える
3

jQueryUIタブとjQueryUIアコーディオンを試して、すでに実行されたスタッフを実行しないようにしてください:)

于 2012-12-19T15:09:44.473 に答える