サブメニューが一斉に表示される

イベントをトリガーするボタンをクリックすると、サブメニューがすべて表示されます。ここでサブメニューが一斉に表示される

は作業例です：

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>

出典

2016-10-27 Alfrd Montiel

問題は、あなたが彼らの 'class'によって項目を参照しているということである - 何かをすべての要素が共有されるため、一致するすべての要素で実行されます。（var subMenu = $（ '。sub-menu'）; 'はvar subMenu = $（ 'サブメニュー'）のようになります。メインメニュー項目に含まれる要素だけを取得するには、[JQueryの子セレクタ]（https://api.jquery.com/child-selector/）を使用します。 – samiles

トグルボタンにメニューの相対

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/

出典

2016-10-27 04:32:20 madalinivascu

素晴らしいです、解決策を提供していただきありがとうございます。 –

答えを受け入れることを忘れないでください – madalinivascu

サブメニューが一斉に表示される

答えて

関連する問題