如何让JQuery选择单个子菜单？

我正在构建的Wordpress主题有一个移动导航菜单，我将其设置为在每个包含子菜单/子页面的菜单项的右侧都显示一个span按钮，作为打开和关闭子菜单的一种方式。唯一的问题是，当我单击其中一个按钮时，所有子菜单都会打开，而不仅仅是我单击的那个。有没有一种方法可以设置jQuery来挑出我试图打开的单个子菜单

我的jQuery如下所示–我有两个脚本，第一个用于创建span类，第二个用于在单击时使它们打开子菜单

脚本1:

jQuery(document).ready(function($) {    

$('nav.main-menu#mobile ul li:not(.hide-mobile) ul').parent('li').after('<span class="submenu-button">+</span>');

});

jQuery(document).ready(function($) {    

    $('.submenu-button').click(function() {
        $('nav.main-menu#mobile ul ul').toggleClass('open');


    });
});

更新––––––––––––––––––––––––––––––––––

我的标题：

jQuery(document).ready(function($) {    

$('nav.main-menu#mobile ul li:not(.hide-mobile) ul').parent('li').after('<span class="submenu-button">+</span>');

});

jQuery(document).ready(function($) {    

    $('.submenu-button').click(function() {
        $('nav.main-menu#mobile ul ul').toggleClass('open');


    });
});

请注意——我已经在Wordpress菜单部分通过PHP创建了下面的菜单，所以我的链接都不是硬编码的。因此，我更喜欢一种不涉及菜单项ID的方法

    <!-- MOBILE NAVIGATION MENU -->
    <div class="mobile-menu">
        <span class="menu-button-close"></span>
        <nav class="main-menu" id="mobile">
            <h6 id="mobile-menu-heading">MENU</h6>
            <div class="menu-header-menu-container">
                <ul id="menu-header-menu-1" class="menu">
                    <li class="hide-desktop menu-item menu-item-type-post_type menu-item-object-page menu-item-1386"><a href="http://www.lucieaverillphotography.co.uk/">Home</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-463">
                        <a href="http://www.lucieaverillphotography.co.uk/work/">Work</a>
                        <ul class="sub-menu">
                            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-584"><a href="http://www.lucieaverillphotography.co.uk/work/landscapes/">Landscapes</a></li>
                            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-473"><a href="http://www.lucieaverillphotography.co.uk/work/seascapes/">Seascapes</a></li>
                            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-478"><a href="http://www.lucieaverillphotography.co.uk/work/macro/">Macro</a></li>
                            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-477"><a href="http://www.lucieaverillphotography.co.uk/work/cities/">Cities</a></li>
                            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-475"><a href="http://www.lucieaverillphotography.co.uk/work/long-exposure/">Long Exposure</a></li>
                            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-480"><a href="http://www.lucieaverillphotography.co.uk/work/miscellaneous/">Miscellaneous</a></li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-10"><a href="http://www.lucieaverillphotography.co.uk/about/">About</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464"><a href="http://www.lucieaverillphotography.co.uk/shop/">Shop</a></li>
                    <li class="hide-mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-923">
                        <a>Social</a>
                        <ul class="sub-menu">
                            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a target="_blank" href="http://facebook.com/">Facebook</a></li>
                            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-924"><a href="https://www.instagram.com/lucie_averill">Instagram</a></li>
                            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a target="_blank" href="https://www.flickr.com/photos/lucie-averill/">Flickr</a></li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://www.lucieaverillphotography.co.uk/contact/">Contact</a></li>
                </ul>
            </div>
        </nav>

---

这是因为

$（'nav.main menu#mobile ul'）.toggleClass（'open'）

针对所有出现的

导航主菜单#mobile ul

并应用开放类。要解决此问题，必须在事件处理程序中使用

this

。类似于以下内容的东西

$('.submenu-button').click(function() {
    $(this).parent().toggleClass('open');
});

这将针对单击的特定元素，并向上移动到其父元素，直接为此应用类。它将不得不调整到您的HTML，但总体思路应该遵循

更新

为了可视化，这里有一个使用确切HTML的JSFIDLE。

由于HTML的性质，您必须将其定位为

$('.submenu-button').click(function() {
    $(this).prev().toggleClass('open');
});

---

这将允许它锁定到li，而不是包含所有可扩展列表项的ul。

发生这种情况是因为

$（'nav.main menu#mobile ul ul'）。toggleClass（'open'）

针对所有出现的

导航主菜单#mobile ul

并应用开放类。要解决此问题，必须在事件处理程序中使用

this

。类似于以下内容的东西

$('.submenu-button').click(function() {
    $(this).parent().toggleClass('open');
});

这将针对单击的特定元素，并向上移动到其父元素，直接为此应用类。它将不得不调整到您的HTML，但总体思路应该遵循

更新

为了可视化，这里有一个使用确切HTML的JSFIDLE。

由于HTML的性质，您必须将其定位为

$('.submenu-button').click(function() {
    $(this).prev().toggleClass('open');
});

---

这将允许它锁定到li，而不是包含所有可扩展列表项的ul。

能否包括您的html？您好，我已在上面添加了它。谢谢你能加入你的html吗？嗨，我在上面加了。谢谢，我在我的脚本中尝试过这个，但它似乎不起作用，当我单击按钮时，什么都没有发生。原因可能是两个地方之一，Javascript或CSS。我建议使用Web检查器检查单击按钮时是否正确添加了类

open

。如果是，则需要检查显示隐藏菜单项的CSS规则，因为选择打开元素的方式可能已经改变。我在回答中包括了一个JSFIDLE，查看它可能会提供一些答案。如果位于HTML菜单项中的站点是正确的，我相信罪魁祸首是

nav。主菜单#mobile ul li.current-menu-item a:link

将菜单项的颜色设置为

#ffffff

，导致它们看起来不见了，因为背景也是白色的。对我来说，至少（在谷歌Chrome上）点击时菜单会正确扩展。是的，我刚才注意到了这一点——我已经设法让它工作了，所以非常感谢代码确实工作了：）。我想让我吃惊的是CSS选择器：

。菜单项有子菜单：没有（.open）。子菜单{

…这和写

是一样的。菜单项有子菜单{

，然后是

。菜单项有子菜单。open{

？在我使用

导航主菜单之前{

并更改打开它的高度，我现在要尝试让它工作，它不是

ul

我要添加

open

类。是的，您对

：not

伪类的理解是正确的。它只有在元素上不存在类时才是选择性的，并且允许我声明单个规则，而不是mu多重。至于设置高度，我建议在关闭时将

max height

设置为0，在打开时将其设置为无法访问的大小，这将允许您在打开时使用css转换，而高度则不会。您好，我在脚本中尝试过这一点，但它似乎不起作用，当我单击按钮时，什么也没有发生原因可能是两个地方之一，Javascript或CSS。我建议使用Web检查器检查单击按钮时是否正确添加了类

open

。如果是，则需要检查显示隐藏菜单项的CSS规则，因为选择打开元素的方式可能已更改。我包括我的答案中有一个JSFIDLE，查看它可能会提供一些答案。如果位于HTML菜单项中的站点是正确的，我相信罪魁祸首是

nav。主菜单#mobile ul li.current-menu-item a:link

将菜单项的颜色设置为

#ffffff

，导致它们看起来不见了，因为背景也是白色的。对我来说，在至少（在Google Chrome上）菜单在点击时会正确扩展。是的，我刚才注意到了这一点——我已经成功地让它工作了，所以非常感谢代码可以工作：）。我想让我吃惊的是CSS选择器：

。菜单项有子项：没有（.open）。子菜单{

…这与编写

相同吗？菜单项有子项{

后接

.menu-item-has-children.open{

？在我使用

导航主菜单之前{