Question

我建造的Wordpress主题有一个移动导航菜单，我已将其设置为每个具有子/子页面的菜单项的右侧显示一个跨度按钮，允许我打开和关闭子菜单的方法。唯一的问题是，当我点击其中一个按钮时，所有子菜单都会打开，而不仅仅是我点击的那个。有没有办法设置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>');

});

脚本2：

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>

我的PHP

   function register_menus() {

  register_nav_menus(

        array(

            'primary' => esc_html__( 'Primary Menu', 'theme_wp' ),    
            'header' => __( 'Header Menu' ),
            'footer' => __( 'Footer Menu' )     
    ));
}

add_action( 'init', 'register_menus' );

Answer 1

这是因为$('nav.main-menu#mobile ul ul').toggleClass('open');定位所有nav.main-menu#mobile ul ul并应用了开放课程。要解决此问题，您必须在事件处理程序中使用this。类似于以下内容...

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

这将针对单击的特定元素，并向上移动到其父元素，直接为此应用该类。它必须调整到您的HTML，但总体思路应该贯彻执行。

<强>更新

对于可视化，这里是使用精确HTML的JSFiddle。 https://jsfiddle.net/8nj5y4t1/4/

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

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

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

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

1 个答案: