-1

ASP.Net，2.0 VS2005，.Net 2.0 jQuery 1.8.3，jQuery UI 1.9.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

尝试jQuery UI Tabs和jQuery UI Accordion不要做已经做过的工作人员 :)

于 2012-12-19T15:09:44.473 回答