jquery - 折叠和展开列表

Question

<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>

这是一个侧边栏菜单，我必须使用这些特定的标签。 (这是老板吩咐的。)

上面的 HTML 生成了一个链接列表，其中包含多个粗体标题链接，后跟常规元素链接。单击标题会在网格内显示元素。单击元素显示特定元素的详细信息。该站点已设置为这样，我需要保持这样。

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

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

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

有没有人有一个很好的例子来实现这一切？

Answer 1

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

在这里，您将 foo-dt 替换为 header 类。每个 header 都不同，但它必须与 dd ex 相同:如果 header 是 foo-dt 然后列表是 foo-dd。

对于 header 之间的变化，使用这个:

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");
});
});