jquery打开和关闭子导航，深入两级答案

【问题标题】：jquery open and close of sub navigation that goes two levels deepjquery打开和关闭子导航，深入两级
【发布时间】：2013-08-03 03:43:54
【问题描述】：

代码的js小提琴可以在这里找到：http://jsfiddle.net/wBLLQ/4/

菜单结构：

<nav id="subnav"> <a href="#" class="arrow-button mobile">Sub Nav Button<i class="ss-icon ss-gizmo">&#xF501;</i></a> 
<!-- color class on button -->
    <ul class="sub-nav">
        <!-- color class for sub navigation -->
        <li class="section-home"><a href="#" class="default">Section Home<i class="ss-icon ss-gizmo">&#x25BB;</i></a></li>
        <li class="level-1"><a href="#">Employment</a><!-- active -->
            <ul class="level-2">
                <li><a href="#">Identifying your skills</a></li>
                <!-- active -->
                <li><a href="#">Finding a job</a></li>
                <li><a href="#">Employing a person with a disability</a></li>
                <li><a href="#">Your rights in the workplace</a></li>
                <li><a href="#">Financial Assistance for jobseekers</a></li>
                <li><a href="#">Work experience &amp; volunteering</a></li>
            </ul>
        </li>
        <!-- end 1st level -->
        <li class="level-1"><a href="#">Independent Living</a>
            <ul class="level-2">
                <li><a href="#">Identifying your skills</a></li>
                <li><a href="#">Finding a job</a></li>
                <li><a href="#">Employing a person with a disability</a></li>
                <li><a href="#">Your rights in the workplace</a></li>
                <li><a href="#">Financial Assistance for jobseekers</a></li>
                <li><a href="#">Work experience &amp; volunteering</a></li>
            </ul>
        </li>
        <!-- end 1st level -->
        <li class="level-1"><a href="#">Education</a>
            <ul class="level-2">
                <li><a href="#">Identifying your skills</a></li>
                <li><a href="#">Finding a job</a></li>
                <li><a href="#">Employing a person with a disability</a></li>
                <li><a href="#">Your rights in the workplace</a></li>
                <li><a href="#">Financial Assistance for jobseekers</a></li>
                <li><a href="#">Work experience &amp; volunteering</a></li>
            </ul>
        </li>
        <!-- end 1st level -->
        <li class="level-1"><a href="#">Parenting with a disability</a>
            <ul class="level-2">
                <li><a href="#">Identifying your skills</a></li>
                <li><a href="#">Finding a job</a></li>
                <li><a href="#">Employing a person with a disability</a></li>
                <li><a href="#">Your rights in the workplace</a></li>
                <li><a href="#">Financial Assistance for jobseekers</a></li>
                <li><a href="#">Work experience &amp; volunteering</a></li>
            </ul>
        </li>
        <!-- end 1st level -->
        <li class="level-1"><a href="#">Parents of a child with a disability</a><!-- active -->
            <ul class="level-2">
                <li><a href="#">Identifying your skills</a></li>
                <!-- active -->
                <li><a href="#">Finding a job</a></li>
                <li><a href="#">Employing a person with a disability</a></li>
                <li><a href="#">Your rights in the workplace</a></li>
                <li><a href="#">Financial Assistance for jobseekers</a></li>
                <li><a href="#">Work experience &amp; volunteering</a></li>
            </ul>
        </li>
        <!-- end 1st level -->
        <li class="level-1"><a href="#">Sport</a>
            <ul class="level-2">
                <li><a href="#">Identifying your skills</a></li>
                <li><a href="#">Finding a job</a></li>
                <li><a href="#">Employing a person with a disability</a></li>
                <li><a href="#">Your rights in the workplace</a></li>
                <li><a href="#">Financial Assistance for jobseekers</a></li>
                <li><a href="#">Work experience &amp; volunteering</a></li>
            </ul>
        </li>
        <!-- end 1st level -->
        <li class="level-1"><a href="#">Legal Information</a>
            <ul class="level-2">
                <li><a href="#">Identifying your skills</a></li>
                <li><a href="#">Finding a job</a></li>
                <li><a href="#">Employing a person with a disability</a></li>
                <li><a href="#">Your rights in the workplace</a></li>
                <li><a href="#">Financial Assistance for jobseekers</a></li>
                <li><a href="#">Work experience &amp; volunteering</a></li>
            </ul>
        </li>
        <!-- end 1st level -->
        <li class="level-1"><a href="#">Newly Disabled</a>
            <ul class="level-2">
                <li><a href="#">Identifying your skills</a></li>
                <li><a href="#">Finding a job</a></li>
                <li><a href="#">Employing a person with a disability</a></li>
                <li><a href="#">Your rights in the workplace</a></li>
                <li><a href="#">Financial Assistance for jobseekers</a></li>
                <li><a href="#">Work experience &amp; volunteering</a></li>
            </ul>
        </li>
        <!-- end 1st level -->
        <li class="level-1"><a href="#">Relationship &amp; Fertility</a>
            <ul class="level-2">
                <li><a href="#">Identifying your skills</a></li>
                <li><a href="#">Finding a job</a></li>
                <li><a href="#">Employing a person with a disability</a></li>
                <li><a href="#">Your rights in the workplace</a></li>
                <li><a href="#">Financial Assistance for jobseekers</a></li>
                <li><a href="#">Work experience &amp; volunteering</a></li>
            </ul>
        </li>
        <!-- end 1st level -->
        <li class="level-1"><a href="#">Travel</a>
            <ul class="level-2">
                <li><a href="#">Identifying your skills</a></li>
                <li><a href="#">Finding a job</a></li>
                <li><a href="#">Employing a person with a disability</a></li>
                <li><a href="#">Your rights in the workplace</a></li>
                <li><a href="#">Financial Assistance for jobseekers</a></li>
                <li><a href="#">Work experience &amp; volunteering</a></li>
            </ul>
        </li>
        <!-- end 1st level -->
        <li class="level-1"><a href="#">Accessibility</a>
            <ul class="level-2">
                <li><a href="#">Identifying your skills</a></li>
                <li><a href="#">Finding a job</a></li>
                <li><a href="#">Employing a person with a disability</a></li>
                <li><a href="#">Your rights in the workplace</a></li>
                <li><a href="#">Financial Assistance for jobseekers</a></li>
                <li><a href="#">Work experience &amp; volunteering</a></li>
            </ul>
        </li>
        <!-- end 1st level -->
        <li class="level-1"><a href="#">Government</a>
            <ul class="level-2">
                <li><a href="#">Identifying your skills</a></li>
                <li><a href="#">Finding a job</a></li>
                <li><a href="#">Employing a person with a disability</a></li>
                <li><a href="#">Your rights in the workplace</a></li>
                <li><a href="#">Financial Assistance for jobseekers</a></li>
                <li><a href="#">Work experience &amp; volunteering</a></li>
            </ul>
        </li>
        <!-- end 1st level -->
        <li class="level-1"><a href="#">Transition</a>
            <ul class="level-2">
                <li><a href="#">Identifying your skills</a></li>
                <li><a href="#">Finding a job</a></li>
                <li><a href="#">Employing a person with a disability</a></li>
                <li><a href="#">Your rights in the workplace</a></li>
                <li><a href="#">Financial Assistance for jobseekers</a></li>
                <li><a href="#">Work experience &amp; volunteering</a></li>
            </ul>
        </li>
        <!-- end 1st level -->
        <li class="view-all"><a href="#" class="default more">View Menu Itemss<i class="ss-icon ss-gizmo">&#xF501;</i></a></li>
    </ul>
    <!-- end sub-nav --> 
</nav>
<!-- end subnav -->

Javascript：

$('#subnav > a').click(function(event){
    event.preventDefault();
    $('.sub-nav').slideToggle("slow");

    $(".level-1 > a").click(function(event){
        event.preventDefault();

        if(($(this).siblings('.level-2').is(":visible"))) {

            $(this).siblings('.level-2').slideUp("slow");
            $('.view-all > a').slideUp();
            $('.level-1 > a').not($(this)).parents('.level-1').slideDown("slow");


        } else {

            if($(".level-2").is(":visible")){
                $(".level-2").slideUp("slow");
            }

            $(this).siblings('.level-2').slideDown("slow");
            $('.view-all > a').slideDown();
            $('.level-1 > a').not($(this)).parents('.level-1').slideUp("slow");
        }

        $(".view-all > a").click(function(event){
            event.preventDefault();
            $(".level-1").show("slow");
            $(this).slideUp();
        });
    });

CSS：

.sub-nav {
    display: none;
    background: grey; 
}

.sub-nav ul {
    display: none; 
}

.sub-nav .section-home a {
    color: red; 
}

.sub-nav .level-2 a {
    color: green; 
}

.sub-nav .view-all a {
    color: black; 
}

子导航功能： 当点击Sub Nav Button 按钮时 - 显示子导航，显示所有第一级导航项。

如果你然后点击一级导航项：

它显示第二级导航项。
隐藏所有其他不相关的第一级子导航项。
显示一个view all 按钮，可用于显示所有隐藏的第一级项目。

view all 按钮将显示所有第一级项目（不会影响显示的第二级项目，如果第二级导航打开，它将保持打开状态）

问题是当第二级导航打开并且你关闭子导航时。当您再次打开子导航时，仍然显示二级项目，它与我的 jquery 冲突，因为然后单击一级项目将一直打开和关闭。

我不确定如何编写我的 jquery 以使这不会成为问题。任何帮助，将不胜感激。我不擅长 jquery。

【问题讨论】：

我很难理解到底是什么问题。你能试着让它更清楚一点吗？
您好，问题是导航工作正常，除非第二级 ul 保持打开状态并且整个子导航关闭，所以当它再次打开时（就像你第一次做的那样）不同之处在于二级项目正在显示，这意味着当单击一级项目时，它会立即打开和关闭二级项目，因此它们不会保持可见，它们会立即隐藏 - 这有意义吗？如果您玩小提琴，您会明白我的意思，只需在您关闭整个菜单时显示 sue 2 级项目

标签： jquery

【解决方案1】：

我没有 100% 明白您的问题，但您想在单击“查看菜单项”时关闭第二级导航？

如果是这样，你可以这样做

            $(".view-all > a").click(function(event){
                event.preventDefault();
                $(".level-1").show("slow");
                $(this).slideUp();
                $(".level-2").slideUp("slow");
            });

小提琴已更新 http://jsfiddle.net/wBLLQ/5/

【讨论】：