1

我正在使用带有 Razor 视图引擎的 MVC 4。

我想显示一个嵌套的无序列表，其中包含作为父母的年份和作为孩子的月份。

考虑以下 HTML：

<div>
    <ul>
    @foreach (var yr in Dates.Select(x => x.Year).Distinct())
    {
        <li><a href="#" class="parent">@yr</a></li>
        <ul class="child" style="display: none">
        @foreach (var mo in Dates.Where(x => x.Year == yr).Distinct())
        {
            <li id="@yr"><a href="#" class="submit-link" id="@mo.Month">@mo.ToString("MMMM")</a></li>
        }
        </ul>
    }
    </ul>
</div>

我添加了以下脚本，以在单击“.parent”锚点时显示“.child”（dis）。

<script type="text/javascript">

    $(function () {
        $(".parent").click(function () {
            $(this).closest("ul").find(".child").toggle("fast")
            return false;
        });
    });

</script>

但是，它会切换文档中的所有“.child”项目。如何让它只切换一个孩子？

4

1 回答 1

3

您的 html 无效：您不能将一个<ul>元素直接嵌套在另一个<ul>.

您<ul class="child">应该<li>与相应的锚元素在同一元素内：

<div>
    <ul>
    @foreach (var yr in Dates.Select(x => x.Year).Distinct())
    {
        <li><a href="#" class="parent">@yr</a>
            <ul class="child" style="display: none">
            @foreach (var mo in Dates.Where(x => x.Year == yr).Distinct())
            {
                <li id="@yr"><a href="#" class="submit-link" id="@mo.Month">@mo.ToString("MMMM")</a></li>
            }
            </ul>
        </li>
    }
    </ul>
</div>

然后你可以这样做：

$(function () {
    $(".parent").click(function () {
        $(this).siblings(".child").toggle("fast");
        // OR
        $(this).next().toggle("fast");
        return false;
    });
});

你拥有它的方式，$(this).closest("ul")上升到顶层<ul>，所以当你使用.find(".child")它时，它会在顶层的任何地方找到该类的所有元素<ul>。

于 2012-11-03T05:13:17.130 回答