折叠和展开列表答案

【问题标题】：Collapse and expand a list折叠和展开列表
【发布时间】：2015-08-09 05:58:00
【问题描述】：

<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 标签，所以我错过了一个很好的例子。

有没有人有一个很好的例子来完成这一切？

【问题讨论】：

标签： jquery css asp.net-mvc-4 visual-studio-2013

【解决方案1】：

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

在此您将foo-dt 替换为标题类。每个标题都不同，但它必须与 dd ex 相同：如果标题为foo-dt，则列表为foo-dd。

对于标题之间的更改，请使用：

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

【讨论】：