0

代码的 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 不是很好。

4

1 回答 1

0

我没有 100% 得到你的问题，但是当你点击“查看菜单项”时你想关闭第二级导航？

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

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

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

于 2013-08-02T02:15:25.693 回答