Jquery 折叠并展开列表 @ActionLink（“foo标签”、“foo”、“Bar”） @foreach（FooBar.Items中的变量foo） { @ActionLink（@foo.Naam，@foo.Index，“Bar”） } ... 更多类似的dt/dd集合。

这是一个边栏菜单，我必须使用这些特定的标签。（这是老板命令的。）

上面的HTML生成一个链接列表，其中包含多个粗体标题链接，后跟常规项目链接。单击标题将显示网格中的项目。单击项目将显示特定项目的详细信息。该网站已经建立了这样，我需要保持这样

但是有人问我是否可以让标题折叠它下面的项目，并且只在用户单击链接时让它展开。然后，它将在主窗口中显示一个网格，并在侧边栏中显示作为选项的项目

当用户单击另一个标题时，当前标题必须再次折叠，另一个网格需要与侧栏中的项目一起显示。因此，基本上，边栏将存储所有标题，并且只存储选定标题的项目

这能做到吗？当然，但我不知道从哪里开始。好吧，好吧。这些标记可能必须包含一个额外的类，将它们标识为可折叠项，并带有额外的CSS样式和一些JavaScript或JQuery脚本。但由于互联网上的大多数示例都是可折叠的div标记，而不是dl/dt/dd标记，因此我缺少一个好的示例

有没有人有一个很好的例子让这一切都起作用

<dl class="">
    <dt class="foo-dt">@Html.ActionLink("foo-label", "Foo", "Bar")</dt>
    @foreach (var foo in FooBar.Items)
    {
        <dd class="foo-dd">@Html.ActionLink(@foo.Naam, @foo.Index, "Bar")</dd>
    }
    ... More of similar dt/dd collections.
</dl>

在这里，您将用headers类替换

foo dt

。。每个标题不同，但必须与dd ex相同：如果标题为

foo dt

，则列表为

foo dd

对于标题之间的更改，请使用以下内容：

$('dt.foo-class').each(function(){
$(this).click(function(){
 $('dd.foo-class').show("slow");
});
});

prevHeader ="";
$('dt.foo-class').each(function(){
$(this).click(function(){
if(prevHeader == ""){
prevHeader = "dd"+$(this).attr("class");
}else{
if(prevHeader != $(this).attr("class");){
$("dd"+prevheader).hide('slow');}
}
 $('dd.foo-class').show("slow");
prevHeader = $(this).attr("class");
});
});