1

RazorビューエンジンでMVC4を使用しています。

親としての年と子としての月で構成される、ネストされた順序付けられていないリストを表示したいと思います。

次の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」（非）が表示されるようにしました。

<script type="text/javascript">

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

</script>

ただし、ドキュメント内のすべての「.child」アイテムを切り替えます。子のみを切り替えるようにするにはどうすればよいですか？

4

1 に答える 1

3

<ul>HTMLが無効です。要素を別の要素内に直接ネストすることはできません<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 に答える