如何为两级无序列表制作菜单按钮removeClass？

Question

我正在尝试解决我的移动菜单问题，如果用户使用切换按钮关闭子子菜单，则在重新打开子菜单时，菜单的所有下级（孙子菜单）当前仍保持打开状态。

我正在尝试通过单击ul ulsubmenu 按钮关闭子菜单来实现它，同时删除ul ul ul 孙子菜单的.open 类。

问题似乎是由于我使用 jQuery 插入它们的方式，我无法为子菜单按钮提供 id 或类。因此，我无法告诉每个级别的子菜单按钮要定位到哪个级别的菜单。

我尝试使用.children() 和.find() 选择器的组合来实现此目的，但没有取得任何成功。谁能告诉我这样做的正确方法？

注意： 我已经使用PHP通过Wordpress配置菜单结构，所以我对html几乎没有控制

https://jsfiddle.net/8nj5y4t1/44/

HTML：

<nav class="main-menu" id="mobile">
    <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.mywebsite.com">Link 1</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.mywebsite.comwork/">Link 2</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.mywebsite.comwork/landscapes/">Child-link 1</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-473"><a href="http://www.mywebsite.comwork/seascapes/">Child-link 2</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-478"><a href="http://www.mywebsite.comwork/macro/">Child-link 3</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-477"><a href="http://www.mywebsite.comwork/cities/">Child-link 4</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-475"><a href="http://www.mywebsite.comwork/long-exposure/">Child-link 5</a>
                        <ul class="sub-menu">
                             <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-480"><a href="http://www.mywebsite.comwork/miscellaneous/">Grandchild-link 1</a></li>
                        </ul>
                    </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-has-children menu-item-10"><a href="http://www.lucieaverillphotography.co.uk/about/">Link 3</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/">Link 4</a></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/">Link 5</a></li>
        </ul>
    </div>
</nav>

CSS：

nav.main-menu#mobile {
  min-width:300px;
  max-width:400px;
  background-color:orange;
  padding-top:20px;
  padding-bottom:20px;
}

nav.main-menu#mobile ul { 
    position:relative; 
    overflow: auto; 
    margin:0;
    padding:0;
}

nav.main-menu#mobile ul li {
    display:inline-block; 
    float:left; 
    width: 100%;
    overflow-x: hidden; 
}

nav.main-menu#mobile ul li a {
    display:inline-block;
    height: auto;
    width: 200px;
    padding:15px 0px 15px 30px;
    font-family: Open Sans, Helvetica;
    font-size: 18px;
    color:purple;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-transform: uppercase;
}

.submenu-button {
  cursor:pointer;
  float:right;
  padding:15px 20px 15px 20px;
}

nav.main-menu#mobile ul ul {
  max-height:0;
  width:100%;
  transition: all 800ms;
  background-color:white;
  overflow:hidden;
}

nav.main-menu#mobile ul ul.open { 
  max-height:1000px;
  background-color:green;
}

nav.main-menu#mobile ul ul li {
  transition:2s;
}

nav.main-menu#mobile ul ul li a {
  padding-left: 45px;
  font-size: 16px;
  transition:2s;
}

nav.main-menu#mobile ul ul li.open a {
  color:yellow;
}

nav.main-menu#mobile ul ul ul {
  background-color:white;
}

nav.main-menu#mobile ul ul ul.open {
  background-color:green;
}

nav.main-menu#mobile ul ul ul li a {
  padding-left:60px;
}

jQuery：

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

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

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

});

});

更新的 JQuery：

$('.submenu-button').click(function() { $(this).toggleClass('open'); $(this).next().toggleClass('open').children('li').toggleClass('open').find('li,ul').removeClass('open');

});

Answer 1

我更新了您的 code 来执行此操作，这似乎为我解决了问题（在那个 jsfiddle 中）。我从所有子 'ul' 元素中删除了 'open' 类

$(this).next().toggleClass('open').children('li').toggleClass('open').find('ul').removeClass('open');