Javascript下拉Nav -收缩非选定选项

Question

我正在努力获得一个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;
            }
        }

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');
        });

        });

这是很好的工作，但现在当在小屏幕下拉模式，我希望只有一个下拉子菜单是打开一次。例如，如果有人单击Parent#1来查看下拉列表，那么如果他们单击Parent#2查看下拉Parent#1，则应该隐藏该下拉列表。我想不出该怎么做

Answer 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');
  });