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替换为每个标头的标题类..不同，但必须与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");
});
});

折叠并展开列表

1 个答案: