Как сделать кнопку меню removeClass для двух уровней неупорядоченного списка?

Question

Я пытаюсь решить проблему с моим мобильным меню, где, если пользователь закрывает дочернее подменю с помощью кнопок переключения, все подчиненные уровни меню (подменю внука) в настоящее время остаются открытыми, когда подменю снова открывается.

Я пытаюсь сделать так, чтобы нажав кнопку подменю ul ul, чтобы закрыть дочернее меню, он удаляет класс .open для подменю внука ul ul ul.

Проблема заключается в том, что я не могу дать кнопкам подменю идентификатор или класс из-за того, что я использовал jQuery для их вставки. Поэтому я не могу рассказать каждому уровню кнопок подменю, для которых уровень целевого меню.

Я попытался достичь этого, используя комбинации переключателей .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 (документ) .ready (функция ($) {

$('<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:

$ ('Подменю кнопки ') нажмите (функция() { $ (это) .toggleClass (' открытый'); $ (это) .next () .toggleClass ('open'). children ('li'). toggleClass ('open'). find ('li, ul'). removeClass ('open');

});

Answer 1

Я обновил ваш code, чтобы сделать это, что, кажется, исправить вещи для меня (в этом jsfiddle). Я удалить «открытый» класс из всех дочерних элементов «уль»

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