Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/76.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
与父元素相邻的Javascript元素_Javascript_Html_Parents - Fatal编程技术网

与父元素相邻的Javascript元素

与父元素相邻的Javascript元素,javascript,html,parents,Javascript,Html,Parents,意识到我之前问的一个问题并不是最清晰的提问方式,所以我试图简化它并添加更多细节,因为我想我知道我需要做什么,只是不知道如何做 我有一个多级菜单-HTML <nav id="site-navigation" class="main-navigation" role="navigation"> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Menu<

意识到我之前问的一个问题并不是最清晰的提问方式,所以我试图简化它并添加更多细节,因为我想我知道我需要做什么,只是不知道如何做

我有一个多级菜单-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>
不起作用的线路是

 _this.parents(".dropdown-toggle").toggleClass("toggle-on")
上面这条线行得通,但这条不行。我认为这是因为按钮在被点击的按钮上方分层,但它不算为父级,因为它与在上面一行被选中的
标记处于同一级别


我如何切换单击按钮正上方的所有按钮的类?

一种方法可以是使用按钮选择器上升2次,然后下降1次

我想可能是这样的:


\u this.parent().parent().children('button')

你好,谢谢。我已经实现并测试了它,它肯定适用于按钮正上方的菜单,但不适用于任何更高的菜单。从理论上讲,菜单选项可以有许多下拉级别,我希望这能影响所有的父级。我使用了您的代码,但将其修改为使用parents方法搜索列表项,然后使用button标记搜索该列表项的子项。例如_this.parents('li')、children('button')、addClass('toggle-on');
 _this.parents(".dropdown-toggle").toggleClass("toggle-on")