Question

我正在使用带有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”项目。如何让它只切换孩子？

Answer 1

您的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>。

切换列表项的可见性

1 个答案: