0

我的切换正在发生，但它也被应用于第二个嵌套级别。

加载时，我只希望不显示第一个嵌套 UL 的父级和父级二。第二个嵌套的 UL 将在此 LI 内保持打开状态。

当我单击父级一或父级二时，第一个嵌套的 ul 应该打开/关闭。第二个嵌套的 UL 在此 LI 内应始终保持打开状态。

<div class="navColumn">
    <ul class="ltColmenu">
        <li><a href="">No Child 1</a></li>
        <li><a href="">No Child 2</a></li>
        <li><a href="">No Child 3</a></li>
        <li><a href="#" class="headNavItem headNavItemClose">Parent One</a>
            <ul>
                <li><a href="">Item 1</a></li>
                <li><a href="">Item 2</a></li>
                <li><a href="">Item 3</a></li>
                <li><a href="" class="headNavItem">Item 4</a>
                    <ul>
                        <li><a href="">Item 1 -1</a></li>
                        <li><a href="">Item 1 -2</a></li>
                        <li><a href="">Item 1 -3</a></li>
                        <li><a href="">Item 1 -4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="">No Child 4</a></li>
        <li><a href="">No Child 5</a></li>
        <li><a href="#" class="headNavItem headNavItemClose">Parent Two</a>
            <ul>
                <li><a href="">Item 5</a></li>
                <li><a href="">Item 6</a></li>
                <li><a href="">Item 7</a></li>
                <li><a href="" class="headNavItem">Item 8</a>
                    <ul>
                        <li><a href="">Item 2 -1</a></li>
                        <li><a href="">Item 2 -2</a></li>
                        <li><a href="">Item 2 -3</a></li>
                        <li><a href="">Item 2 -4</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

我有以下 jquery，选择器也选择了第 4 项和第 8 项。我不想要这种行为。我只希望选择器选择家长一和家长二。我该如何解决这个问题？

$(document).ready(function () {
    //onload hide first level nested items, all other levels will remain open inside top LI
    $("ul.ltColmenu > li ul").slideToggle("fast");
    //click on first level LIs, as first level only toggles. all other levels will remain open inside top LI
    $("ul.ltColmenu > li a.headNavItem").click(function(){
        if ($(this).next("ul").is(':visible')) {
            $(this).removeClass("headNavItemOpen").removeClass("headNavItemClose").addClass("headNavItemClose");
        }
        else{
            $(this).removeClass("headNavItemOpen").removeClass("headNavItemClose").addClass("headNavItemOpen");
        }
        $(this).next("ul").slideToggle("slow");
        return false;
    });

});
4

1 回答 1

0

这对我有用...

$(document).ready(function () {
    //onload hide first level nested items, all other levels will remain open inside top LI
    $("ul.ltColmenu > li > ul").slideToggle("fast");
    //click on first level LIs, as first level only toggles. all other levels will remain open inside top LI
    $("ul.ltColmenu > li > a.headNavItem").click(function(){
        if ($(this).next("ul").is(':visible')) {
            $(this).removeClass("headNavItemOpen").removeClass("headNavItemClose").addClass("headNavItemClose");
        }
        else{
            $(this).removeClass("headNavItemOpen").removeClass("headNavItemClose").addClass("headNavItemOpen");
        }
        $(this).next("ul").slideToggle("slow");
        return false;
    });

});
于 2013-05-30T07:22:18.033 回答