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> 标记处于同一级别，后者确实在上面的行中被选中。

我该如何为所点击按钮正上方的所有按钮切换 class？

Answer 1

一种方法是使用按钮选择器向上移动 2 次然后向下移动 1 次。

我想它可能看起来像这样：

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

Javascript 影响与父项相邻的元素

Javascript Effecting Element adjacent to parent

javascript

html

parents