Question

我在单击水平菜单中的项目时使用jQuery代码显示垂直子菜单。

我的jQuery代码工作正常，但是当点击顶级菜单项时，我希望我的顶级菜单保持内联，而不是像这里的jsfiddle那样破坏：http://jsfiddle.net/cQjBy/1/

我还希望子菜单位于顶部菜单项下方，带有完整的灰色背景。

对于我来说，当子菜单显示时，内容会滑动，这就是我希望保留的效果。

以下是我想要实现的目标的两张图片：

enter image description here

这是我的HTML：

        <header id="header">
            <ul id="menu">
<li><a href="#">MENU 1</a></li>
        <ul class="sous_menu">
                <li><a href="#chateau">SUB MENU 1</a></li>
                <li><a href="#rehabilitation">SUB MENU 2</a></li>
                <li><a href="#espaces">SUB MENU 3</a></li>
                <li><a href="#equipe">SUB MENU 4</a></li>
                <li><a href="#partenaires">SUB MENU 5</a></li>
                <li><a href="#privatiser">SUB MENU 6</a></li>
            </ul>
<li><a href="#">MENU 2</a></li>
        <ul class="sous_menu">
                <li><a href="#a_propos">SUB MENU 1</a></li>
                <li><a href="#les_porteurs">SUB MENU 2</a></li>
                <li><a href="#le_lab">SUB MENU 3</a></li>
                <li><a href="#soutenir_le_projet">SUB MENU 4</a></li>
            </ul>
<li><a href="#">MENU 3</a></li>
        <ul class="sous_menu">
                <li><a href="#">SUB MENU 1</a></li>
                <li><a href="#">SUB MENU 2</a></li>
                <li><a href="#">SUB MENU 3</a></li>
                <li><a href="#">SUB MENU 4</a></li>
            </ul>
<li><a href="#">MENU 4</a></li>
            <ul class="sous_menu">
                <li><a href="#">SUB MENU 1</a></li>
                <li><a href="#">SUB MENU 2</a></li>
                <li><a href="#">SUB MENU 3</a></li>
            </ul>
<li><a href="#">MENU 5</a></li>
            <ul class="sous_menu">
                <li><a href="#">SUB MENU 1</a></li>
                <li><a href="#">SUB MENU 2</a></li>
                <li><a href="#">SUB MENU 3</a></li>
                <li><a href="#">SUB MENU 4</a></li>
                <li><a href="#">SUB MENU 5</a></li>
            </ul>
<li><a href="#">MENU 6</a></li>
             <ul class="sous_menu">
                <li><a href="#">SUB MENU 1</a></li>
                <li><a href="#">SUB MENU 2</a></li>
                <li><a href="#">SUB MENU 3</a></li>
                <li><a href="#">SUB MENU 4</a></li>
                <li><a href="#">SUB MENU 5</a></li>
            </ul>
</ul>
</header>
<div class="content">THIS IS THE CONTENT</div>

我的css：

header {
    font-size: 0px;
    top:0;
    background-color: rgba(255,255,255,0.9);
    width:100%;
}

header #menu {
    display: inline-block;
    font-size: 0px;
    vertical-align: top;
}
header #menu li {
    display: inline-block;
    border-right: 1px solid #00F800;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 15px;
    text-transform: uppercase;
    line-height: 80px;
}

header #menu li a {
    color: #00F800;
    text-decoration: none;
    vertical-align: middle;
}

header #menu .sous_menu {width:100%;background-color:lightgrey}
header #menu .sous_menu  li{
    display:block; 
    border-right: none;
    padding-left: 0;
    padding-right: 0;
    font-size: 15px;
    text-transform: none;
    line-height: 20px;

}
header #menu .sous_menu  li a{}

.content{margin-top:40px}

我的jQuery：

$("ul.sous_menu").hide(); /*hides the submenus*/
$("#menu li").click(function() {
    $(this).next("ul.sous_menu").slideToggle('xfast') /*opens the child submenu*/
    .siblings('ul.sous_menu:visible').slideUp('xfast'); /*closes any opened ones*/
});

希望你理解我的英语！

感谢您的帮助！

Answer 1

您必须将子菜单嵌套到菜单中。你可以避免许多麻烦：

嵌套您的子菜单 HTML

<li><a href="#">MENU 1</a> <!-- Starts here -->
        <ul class="sous_menu"> <!-- This is nested within --!>
                <li><a href="#chateau">SUB MENU 1</a></li>
                <li><a href="#rehabilitation">SUB MENU 2</a></li>
                <li><a href="#espaces">SUB MENU 3</a></li>
                <li><a href="#equipe">SUB MENU 4</a></li>
                <li><a href="#partenaires">SUB MENU 5</a></li>
                <li><a href="#privatiser">SUB MENU 6</a></li>
            </ul>
        </li>   <!-- Ends here -->

容纳您的JQuery来处理新结构：

 $("ul.sous_menu").hide(); /*hides the submenus*/
$("#menu li").click(function () {

    $(this).siblings().children('ul.sous_menu:visible').slideUp('xfast');
    $(this).children("ul.sous_menu").slideToggle('xfast') 

});

并添加更多 CSS 以确保子菜单显示在其父级下方：

width:150px;background-color:lightgrey;
position:absolute;
display: inline-block;
vertical-align: top;

这是一个有效的 DEMO

jquery水平菜单与垂直子菜单

1 个答案: