子菜单一次显示

Question

单击任何触发事件的按钮时，所有子菜单都会显示。

这是一个有效的例子：

https://jsfiddle.net/saidmontiel/734szqLg/9/

我只想让每个人立刻弹出。

我知道必须有很多资源可以解决这个问题，只需复制和粘贴，但实际上我想学习。所以我提前感谢那些将帮助我接受教育的人。

// Mobile Nav Scripts   
    var menuButton = $('.menu-toggle');
    var navul = $('.nav-container');
    var siteContent = $('#content');
    $('.menu-item-has-children').prepend('<button class="sub-menu-btn" aria-controls="submenu" aria-expanded="false"><img width="10px" height="10px" src="http://cdn.mysitemyway.com/icons-watermarks/flat-square-white-on-black/classic-arrows/classic-arrows_double-chevron-down/classic-arrows_double-chevron-down_flat-square-white-on-black_512x512.png"></button>');    
    
    menuButton.click(function () {
        if ($(this).attr("aria-expanded") === "false") {
            navul.toggleClass("menu-opened");
            siteContent.addClass('offCanvas').removeClass('onCanvas');
            $(this).attr("aria-expanded", "true");
        } else {
            navul.removeClass("menu-opened");
            siteContent.addClass('onCanvas').removeClass('offCanvas');
            $(this).attr("aria-expanded", "false");
        }
    });
    
    var subMenuBtn = $('.sub-menu-btn');
    var subMenu = $('.sub-menu');
    var hasChildren = $('menu-item-has-children');
    
    subMenuBtn.click(function () {
        if ($(this).attr("aria-expanded") === "false") {
            subMenu.closest('ul').slideToggle().toggleClass('submenu-opened');
            $(this).attr("aria-expanded", "true");
            
        } else {
            subMenu.slideToggle().removeClass('submenu-opened');
            $(this).attr("aria-expanded", "false");
        }
    });

body {
  background-image: url('https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg');
  background-repeat:repeat;
}
    .menu-toggle {
      display: block;
      background-size: 30px 50px;
      background-repeat: no-repeat;
      background-position: 97%;
      background-color: #000;
      height: 50px;
      width: 100%;
      border: 0;
      border-radius: 0;
      box-shadow: initial;
      text-shadow: initial; }
      .menu-toggle:hover, .menu-toggle:focus {
        box-shadow: initial;
        text-shadow: initial; } 

    .menu-toggle img {
      height: 30px;
      width: auto;
      margin: 0; } 


  #content {
    margin-top: 50px; } 

.menu-open {
  left: 25%; }

.menu-opened {
  left: 25% !important; }

.nav-container {
  left: 100%;
  width: 75%;
  background-color: #323232;
  height: 100vh;
  overflow-y: scroll;
  position: relative;
  -moz-transition-duration: 0.3s, 0.5s;
  -o-transition-duration: 0.3s, 0.5s;
  -webkit-transition-duration: 0.3s, 0.5s;
  transition-duration: 0.3s, 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-property: left, opacity, box-shadow;
  -o-transition-property: left, opacity, box-shadow;
  -webkit-transition-property: left, opacity, box-shadow;
  transition-property: left, opacity, box-shadow; }

#content {
  -moz-transition-duration: 0.3s, 0.5s;
  -o-transition-duration: 0.3s, 0.5s;
  -webkit-transition-duration: 0.3s, 0.5s;
  transition-duration: 0.3s, 0.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -moz-transition-property: left, opacity, box-shadow;
  -o-transition-property: left, opacity, box-shadow;
  -webkit-transition-property: left, opacity, box-shadow;
  transition-property: left, opacity, box-shadow;
  position: relative; }

.onCanvas {
  left: 0; }

.offCanvas {
  left: -75%;
  opacity: .25; }

.current-menu-item {
  background-color: #3F3F3F !important; }

.sub-menu-btn {
  padding: 10px;
  float: right;
  border: 0;
  background: #3c3c3c;
  box-shadow: initial;
  text-shadow: initial;
  border-radius: 0;
  margin: 8px;
  color: #fff; }
  .sub-menu-btn a {
    color: #00cfd3;
    text-decoration: none;
    border-bottom: 1px solid #00cfd3;
    border-top: 1px solid #00cfd3; }
  .sub-menu-btn a:hover, .sub-menu-btn a:visited {
    color: #fff; }
  .sub-menu-btn a:visited, .sub-menu-btn a:active {
    color: #939598;
    border-bottom: 1px solid #939598;
    border-top: 1px solid #939598; }

.main-navigation {
  position: fixed;
  width: 100%;
  z-index: 99;
  background-color: #000; }
  
    .main-navigation {
      height: 50px; }
      .main-navigation a {
        color: #fff;
        text-decoration: none;
        border: 0;
        display: block;
        text-align: right;
        margin-right: 40px;
        padding-right: 15px; }
        .main-navigation a:hover, .main-navigation a:focus {
          color: #fff;
          border: 0;
          text-decoration: none; }
      .main-navigation ul {
        margin: 0;
        list-style: none;
        padding: 0; }
      .main-navigation ul ul {
        display: none; }
      .main-navigation li {
        float: none;
        background-color: #323232;
        border-bottom: 1px solid #000;
        line-height: 50px; }
      .main-navigation li li {
        border: 0;
        margin: 0;
        background-color: #404040;
        border-bottom: 2px solid #4b4b4c; }
      .main-navigation li li a {
        margin-left: 5px; } 
 
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block; }

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0;
  overflow: hidden; }

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  float: left;
  width: 50%; }

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  float: right;
  text-align: right;
  width: 50%; }

.blackout {
  opacity: .2;
  background-color: #000; }

.headerLogo {
  display: none; }
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation" role="navigation">
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
        <img src="https://cdn4.iconfinder.com/data/icons/basic-ui-elements/700/06_menu_stack-512.png" class="menuBurger">
    </button>
    <div id="nav-wrap" class="nav-container">
      <ul id="primary-menu" class="menu">
        <li>
          <a href="">Home</a></li>
            <li class="menu-item-has-children"><a href="#">Concerts &amp; Events</a>
                <ul class="sub-menu" style="display: none;">
                    <li><a href="#">Concerts</a></li>
                    <li><a href="#">Featured artists:</a></li>
                    <li><a href="#">Press</a></li>
                </ul>
            </li>
            <li class="menu-item-has-children"><a href="#">About</a>
                <ul class="sub-menu" style="display: none;">
                    <li><a href="#">History</a></li>
                    <li><a href="#">Music Director</a></li>
                    <li><a href="#">Board of Directors</a></li>
                    <li><a href="#">Staff</a></li>
                    <li class="menu-item-has-children "><a href="#">Orchestra</a>
                        <ul class="sub-menu" style="display: none;">
                            <li><a href="about/league/">League</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="menu-item-has-children"><a href="#">Education</a>
                <ul class="sub-menu" style="display: none;">
                    <li><a href="#">Youth Concerts</a></li>
                    <li><a href="#">Youth Orchestras</a></li>
                    <li><a href="#">EarliStrings</a></li>
                    <li><a href="#">Youth at Concerts</a></li>
                </ul>
            </li>
            <li><a href="give/">Give</a>
                <ul class="sub-menu" style="display: none;">
                    <li><a href="#">Donate</a></li>
                    <li><a href="#">Business Sponsorships</a></li>
                    <li><a href="#">Advertise</a></li>
                    <li><a href="#">Adopt a Musician</a></li>
                    <li><a href="#">Volunteer</a></li>
                    <li><a href="#">Planned Giving</a></li>
                </ul>
            </li>
            <li class="menu-item-has-children"><a href="#">Buy Tickets</a>
                <ul class="sub-menu" style="display: none;">
                    <li><a href="#">Individual Concert Tickets</a></li>
                    <li><a href="#">Season Tickets</a></li>
                    <li><a href="#">Compose a Package</a></li>
                    <li><a href="#">2016-17 Season Brochure</a></li>
                </ul>
            </li>
        </ul></div>                </nav>

Answer 1

切换相对于单击按钮的菜单

 subMenuBtn.click(function () {
        var parent = $(this).parent()
        if ($(this).attr("aria-expanded") === "false") {
           parent.find('> ul').slideToggle().toggleClass('submenu-opened');//open the current one
           parent.siblings().find('ul').slideUp().removeClass('submenu-opened');/close all other on the same level
            $(this).attr("aria-expanded", "true");/

        } else {
            parent.find('> ul').slideToggle().removeClass('submenu-opened');
            parent.siblings().find('ul').slideUp().removeClass('submenu-opened');
            $(this).attr("aria-expanded", "false");
        }
    });

演示：https://jsfiddle.net/uwn9ehmz/1/