Question

我创建了一个移动菜单现在我需要在该菜单中创建一个子菜单单击链接打开子菜单时会出现两个问题。

子菜单在第一级菜单后面打开，应该按下第一级。
如果我＆＃34;点击＆＃34; （你如何在手机上调用它？）打开子菜单的链接直接进入页面，显而易见但我创建了鼠标悬停在桌面和移动设备上的菜单我能够点击菜单项两次所以我可以打开子菜单。

这是HTML输出！

<div class="menu-head-menu-container open">
    <ul id="menu-head-menu" class="menu">
        <li id="menu-item-30" class="menu-item menu-item-has-children">
            <ul class="sub-menu">
                <li id="menu-item-47" class="menu-item menu-item-47">
                <li id="menu-item-50" class="menu-item menu-item-50">
            </ul>
        </li>
        <li id="menu-item-29" class="menu-item menu-item-29">
    </ul>
</div>

这是子菜单的CSS。

menu-head-menu-container > ul > li > ul {
    display:block;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    margin: 10px 0 0 -10px;
    background-color: #FFFFFF;
}

这是第1级菜单项的css：

.menu-head-menu-container > ul > li {
    display: block;
    height: 40px;
    background: #006185;
    width: 100%;
    margin: 0;
    padding: 6px 0 0 0;
    border-bottom: 1px solid #FFF;
}

我真的不明白为什么子页面不可见。

微米。

Answer 1

如果我正确理解，你可以使用这样的东西：

<div class="menu-head-menu-container open">
    <ul id="menu-head-menu" class="menu">
        <li id="menu-item-30" class="menu-item menu-item-has-children">click
            <ul class="sub-menu">
                <li id="menu-item-47" class="menu-item menu-item-47">123</li>
                <li id="menu-item-50" class="menu-item menu-item-50">123</li>
            </ul>
        </li>
        <li id="menu-item-29" class="menu-item menu-item-29">123</li>
    </ul>
</div>

$("#menu-head-menu li").click(function(){
    $(this).find("ul").slideToggle();
});

#menu-head-menu ul{
  display: none;
}

jsfiddle

CSS：移动菜单子菜单问题

1 个答案: