Question

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

我正在努力使其通过单击ul ul子菜单按钮关闭子菜单，它也会删除.open孙子菜单的ul ul ul类。

问题似乎是我无法给子菜单按钮一个id或类，因为我使用jQuery插入它们的方式。因此，我无法告诉每个级别的子菜单按钮目标菜单的哪个级别。

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

注意： 我使用PHP通过Wordpress配置菜单结构，所以我几乎无法控制html

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：

$（＆＃39; .submenu-button＆＃39;）。click（function（）{ $（本）.toggleClass（＆＃39;开放＆＃39;）; $（本）。接下来（）toggleClass（＆＃39;开放＆＃39;）。儿童（＆＃39;李＆＃39;）toggleClass。（＆＃39;开放＆＃39;）。找到（＃39 ;李，UL＆＃39;）removeClass（＆＃39;开＆＃39）;

}）;

Answer 1

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

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

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

1 个答案: