Question

我使用Wordpress PHP函数为我的主题创建标题菜单。当屏幕处于移动宽度时，我将其配置为采用推/滑菜单布局，其中子菜单由父列表项右侧的小按钮激活。我使用我的jQuery选择所有li和li a项作为父列表项的子项，然后使用toggleClass函数添加其他类.open。

我现在面临的一个问题是，当沿着DOM旅行时，父列表项的子项的切换类顺序被颠倒了。列表项的第一层很好，但第二层（孙子，可以这么说）正在以错误的方式过渡。

我已经在jsfiddle中重新创建了这个问题的效果，我在其中添加了背景和文本颜色以更清楚地演示问题。值得注意的一点是，ul项似乎没问题 - 例如在jsfiddle中他们应该从白色开始然后变绿。它是在菜单第三级开始反转的li和li a项目。

有没有办法可以选择无序列表结构中的所有元素 - 分别是ul li和li a并给它们自己的toggleClass命令？

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

HTML：

（请注意，在我的实际Wordpress主题中，菜单是通过PHP配置的，并且没有硬编码，因此我无法使用类来定位它们。

<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">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.mywebsite.comwork/">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.mywebsite.comwork/landscapes/">Landscapes</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/">Seascapes</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/">Macro</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/">Cities</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/">Long Exposure</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/">Miscellaneous</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/">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="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>

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 a.open {
    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;
}

使用Javascript：

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').find('li, li > a').toggleClass('open');

    });

});

Answer 1

使用var employees = from e in dataContext.AccountTrees where (id.HasValue ? e.ParentId == id : e.ParentId == null) select new { id = e.AccountId, Name = e.Name, hasChildren = e.AccountTrees1.Any(), };，children()会查找所有后代，但子项只包含直接后代

find()

的 DEMO

Toggleclass逆转无序列表的子孙

1 个答案: