Javascript影響元素相鄰的父

Question

實現了一個早期的問題，我問是不是最明確的方式問它，所以我試圖簡化它，並添加更多的細節，因爲我想我知道我需要做什麼只是不要不知道該怎麼做。

我有一個多級菜單 - HTML

<nav id="site-navigation" class="main-navigation" role="navigation"> 

<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Menu</button>    
<div class="partial-refreshable-nav-menu partial-refreshable-nav-menu-1 menu-all-pages-container"> 
<ul id="primary-menu" class="nav-menu" aria-expanded="false"> 
    <li id="1636" class="menu-item"> 
     <a href="http://wpthemetestdata.wordpress.com/">Home</a></li> 
    <li id="1637" class="menu-item"> 
     <a href="http://localhost/frytest/blog/">Blog</a></li> 
    <li id="1638" class="menu-item"> 
     <a href="http://localhost/frytest/front-page/">Front Page</a></li> 
    <li id="1639" class="menu-item" aria-haspopup="true"> 
     <a href="http://localhost/frytest/about/">About The Tests</a> 
     <button class="dropdown-toggle" aria-expanded="true"> 
      <span class="screen-reader-text">expand child menu</span> 
     </button> 
     <ul class="sub-menu"> 
      <li id="1697" class="menu-item"> 
      <a href="http://localhost/frytest/about/page-image-alignment/">Page Image Alignment</a></li> 
      <li id="1698" class="menu-item"> 
      <a href="http://localhost/frytest/about/page-markup-and-formatting/">Page Markup And Formatting</a></li> 
      <li id="1640" class="menu-item"> 
      <a href="http://localhost/frytest/about/clearing-floats/">Clearing Floats</a></li> 
      <li id="1641" class="menu-item"> 
      <a href="http://localhost/frytest/about/page-with-comments/">Page with comments</a></li> 
      <li id="1642" class="menu-item"> 
      <a href="http://localhost/frytest/about/page-with-comments-disabled/">Page with comments disabled</a></li> 
     </ul> 
    </li> 
    <li id="1643" class="menu-item" aria-haspopup="true"> 
     <a href="http://localhost/frytest/level-1/">Level 1</a> 
     <button class="dropdown-toggle" aria-expanded="true"> 
      <span class="screen-reader-text">expand child menu</span> 
     </button> 
     <ul class="sub-menu"> 
      <li id="1644" class="menu-item" aria-haspopup="true"> 
       <a href="http://localhost/frytest/level-1/level-2/">Level 2</a> 
       <button class="dropdown-toggle" aria-expanded="true"> 
        <span class="screen-reader-text">expand child menu</span> 
       </button> 
       <ul class="sub-menu"> 
        <li id="1645" class="menu-item"> 
        <a href="http://localhost/frytest/level-1/level-2/level-3/">Level 3</a></li> 
        <li id="1699" class="menu-item"> 
        <a href="http://localhost/frytest/level-1/level-2/level-3a/">Level 3a</a></li> 
        <li id="1700" class="menu-item"> 
        <a href="http://localhost/frytest/level-1/level-2/level-3b/">Level 3b</a></li> 
       </ul> 
      </li> 
      <li id="1701" class="menu-item"> 
      <a href="http://localhost/frytest/level-1/level-2a/">Level 2a</a></li> 
      <li id="1702" class="menu-item"> 
      <a href="http://localhost/frytest/level-1/level-2b/">Level 2b</a></li> 
     </ul> 
    </li> 
    <li id="1646" class="menu-item"> 
     <a href="http://localhost/frytest/lorem-ipsum/">Lorem Ipsum</a></li> 
    <li id="1703" class="menu-item"> 
     <a href="http://localhost/frytest/page-a/">Page A</a></li> 
    <li id="1704" class="menu-item"> 
     <a href="http://localhost/frytest/page-b/">Page B</a></li> 
</ul> 
</div> 
</nav> 

具有附加的子菜單有一個按鈕，用作打開和關閉所連接的元件切換中的每個元素。我一直在嘗試對菜單的功能進行編程，並且遇到了一個棘手的問題。當點擊下拉撥動這個JavaScript運行：

container.find('.dropdown-toggle').click( 
    function(e){ 

    var _this = $(this); 
    e.preventDefault(); 


    $('.dropdown-toggle.toggle-on').toggleClass('toggle-on'); 
    $('.sub-menu.toggled-on').toggleClass('toggled-on'); 

    _this.parents('.sub-menu').toggleClass('toggled-on'); 
    //This is the line that doesnt run 
    _this.parents('.dropdown-toggle').toggleClass('toggle-on'); 

    //toggles the chevron clicked to go on 
    _this.toggleClass('toggle-on'); 
    _this.next('.children, .sub-menu').toggleClass('toggled-on'); 
    //Below has no effect of expansion 
    _this.attr('aria-expanded', _this.attr('aria-expanded') === 'false' ? 'true' : 'false'); 

    _this.html(_this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand); 
    } 
    ); 

行不工作是

_this.parents(".dropdown-toggle").toggleClass("toggle-on") 

它上面的線的工作，但這個沒有。我認爲這是因爲雖然按鈕層次高於單擊的按鈕，但它不會被視爲父級，因爲它與<ul>標記處於同一級別，而該標記會在上面的行中被選中。

我該如何去切換類的所有按鈕直接上面點擊一個？

Answer 1

一種方法可能是上升2次，然後用按鈕選擇器下降1次。

我想這可能是這樣的：

_this.parent().parent().children('button')