jquery打开和关闭两级深度的子​​导航

Question

可以在此处找到代码的小提琴：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不太满意。

Answer 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/