Javascript下拉导航-收缩非选中选项

Javascript Dropdown Nav - Shrink Non-Selected Option

本文关键字：选项导航 Javascript 更新时间：2023-09-26

我正在努力得到一个Javascript下拉导航工作，因为我想。这里有一支笔，写着我要写的地方:

https://codepen.io/mikehdesign/pen/QEgGNW

  <div id="pattern" class="pattern">
        <a href="#menu" class="menu-link">Menu</a>
        <nav id="menu" class="menu" role="navigation">
            <ul class="level-1">
                <!--Parent #1-->
                <li class="has-subnav">
                    <a href="#">Parent #1</a>
                    <ul class="level-2">
                        <li class="has-subnav">
                            <a href="#">Child #1</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                        <li class="has-subnav">
                            <a href="#">Child #2</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                        <li class="has-subnav">
                            <a href="#">Child #3</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                        <li class="has-subnav">
                            <a href="#">Child #4</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                    </ul>
                </li>
                <!--Parent #2-->
                <li class="has-subnav">
                    <a href="#">Parent #2</a>
                    <ul class="level-2">
                        <li class="has-subnav">
                            <a href="#">Child #1</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                        <li class="has-subnav">
                            <a href="#">Child #2</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                        <li class="has-subnav">
                            <a href="#">Child #3</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                        <li class="has-subnav">
                            <a href="#">Child #4</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                    </ul>
                </li>
                <!--Parent #3-->
                <li class="has-subnav">
                    <a href="#">Parent #3</a>
                    <ul class="level-2">
                        <li class="has-subnav">
                            <a href="#">Child #1</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                        <li class="has-subnav">
                            <a href="#">Child #2</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                        <li class="has-subnav">
                            <a href="#">Child #3</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                        <li class="has-subnav">
                            <a href="#">Child #4</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                    </ul>
                </li>
                <!--Parent #4-->
                <li class="has-subnav">
                    <a href="#">Parent #4</a>
                    <ul class="level-2">
                        <li class="has-subnav">
                            <a href="#">Child #1</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                        <li class="has-subnav">
                            <a href="#">Child #2</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                        <li class="has-subnav">
                            <a href="#">Child #3</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                        <li class="has-subnav">
                            <a href="#">Child #4</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                    </ul>
                </li>
                <!--Parent #5-->
                <li class="has-subnav">
                    <a href="#">Parent #5</a>
                    <ul class="level-2">
                        <li class="has-subnav">
                            <a href="#">Child #1</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                        <li class="has-subnav">
                            <a href="#">Child #2</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                        <li class="has-subnav">
                            <a href="#">Child #3</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                        <li class="has-subnav">
                            <a href="#">Child #4</a>
                            <ul class="level-3">
                                <li><a href="#">Grandchild #1</a></li>
                                <li><a href="#">Grandchild #2</a></li>
                                <li class="has-subnav">
                                    <a href="#">Grandchild #3</a>
                                    <ul class="level-4">
                                        <li><a href="#">Great-Grandchild #1</a></li>
                                        <li><a href="#">Great-Grandchild #2</a></li>
                                    </ul>
                                </li>
                            </ul>   
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>

SCSS

a.menu-link {
        float: right;
            display: block;
            padding: 1em;
        }
        .menu, .menu > ul ul {
            clear: both;
            -webkit-transition: all 0.3s ease-out;  
            -moz-transition: all 0.3s ease-out;
            -ms-transition: all 0.3s ease-out;
            -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
        }
        .js .menu, .js .menu > ul ul {
            overflow: hidden;
            max-height: 0;
            background: rgba(0,0,0,0.1);
        }
        .menu.active, .js .menu > ul ul.active {
            max-height: 55em;
        }
        .menu > ul {
            border-top: 1px solid #808080;
        }
        .menu li a {
            color: #000;
            display: block;
            padding: 0.8em;
            border-bottom: 1px solid #808080;
            position: relative;
        }
        .menu li.has-subnav > a:after {
            content: '+';
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            font-size: 1.5em;
            padding: 0.25em 0.5em;
        }
        .menu li.has-subnav > a.active:after {
            content: "-";
        }

        @media screen and (min-width: 48.25em) {
            .pattern {
                overflow: visible;
            }
            a.menu-link {
               display: none;
            }
            .js .menu, .js .menu > ul ul {
                max-height: none;
                overflow: visible;
                background: none;
            }
            .js .menu > ul ul {
                background: #808080;
                display: none;
            }
            .js .menu > ul li:hover > ul {
                display: block;
            }
            .menu ul {
                margin: 0 0 0 -0.25em;
                border: 0;
        text-align: center;
            }
            .menu li a {
                border: 0;
            }
            .menu li.has-subnav > a {
                padding-right: 2em;
            }
            .menu li.has-subnav > a:after {
                content: ">";
                font-size: 1em;
                padding: 0.8em 0.5em;
            }
            .menu .level-1 > li.has-subnav > a:after {
                content: "▼";
            }
            .menu > ul li {
                margin: 0 0.25em;
            }
            .menu > ul > li {
                display: inline-block;
                position: relative;
            }
            .menu > ul ul {
                position: absolute;
                top: 0;
                left: 12em;
                width: 12em;
            }
            .menu > ul ul li {
                position: relative;
            }
            .menu > ul ul.level-2 {
                top: 3em;
                left: 0;
            }
        }

JQUERY JAVASCRIPT

$(document).ready(function() { $('body').addClass('js'); var $menu = $('#menu'), $menulink = $('.menu-link'), $menuTrigger = $('.has-subnav > a'); $menulink.click(function(e) { e.preventDefault(); $menulink.toggleClass('active'); $menu.toggleClass('active'); }); $menuTrigger.click(function(e) { e.preventDefault(); var $this = $(this); $this.toggleClass('active').next('ul').toggleClass('active'); }); });
它工作得很好，但现在在小屏幕下拉模式时，我希望一次只打开一个下拉子菜单。例如，如果有人点击"家长#1"来查看下拉菜单，如果他们点击"家长#2"来查看下拉菜单，那么家长#1就应该隐藏起来。我不知道如何使它工作

我想我找到了，只是用下面的代码替换了$menuTrigger.click(function(e)。它基本上遍历所有其他活动的ul元素，检查(与contains)它是否与当前选择在同一分支上，并相应地停用它和相关的a:href。更新代码在这里

$menuTrigger.click(function(e) { e.preventDefault(); var $newActive = $(this); $( "#menu ul.active" ).each(function( index ) { if(!$.contains($( this )[0],$newActive[0])){ $( this ).removeClass('active'); $( this ).prev('a.active').removeClass('active'); } }); $newActive.toggleClass('active').next('ul').toggleClass('active'); });

相关文章：
在BootStrap菜单栏中为所选项目设置背景，类似于BootStrap中的父导航选项

如何将导航菜单链接到jQuery选项卡

如何在angular bootstrap ui中聚焦活动导航选项卡中的拳头输入字段

如何将数组附加到下拉导航栏并禁用其中的一个选项

使用选项卡导航到不同的html文件(html、JavaScript）

IE7在带有Javascript选项卡导航的页面上误读CSS

当用户在选择框中选择选项时，使用window.location.href重定向用户只会更改导航器中URL的最后一位

引导导航选项卡未突出显示活动选项卡

使用 Javascript 在导航栏中显示当前选项卡

如何在不包含导航选项卡内容、页脚和头部的情况下打印 HTML/PHP 页面

引导导航选项卡在小提琴中工作，但在使用 Chrome 打开时则不工作

测试选项卡导航顺序

引导选项卡导航不起作用

选项卡导航和滚动

从一个页面导航到另一个页面的选项

Boostrap 3，多导航控制单个选项卡窗格

需要jquery&litte-html-css改进猫头鹰幻灯片与选项卡导航(分页）

用户配置文件的选项卡导航

AngularJS Bootstrap Tabset 选项卡在 IE8 中不起作用的选项卡之间的选项卡导航

我的导航选项卡正在删除元素