带有垂直子菜单的 jquery 水平菜单

Question

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

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

我还希望子菜单位于顶部菜单项的正下方，背景为全灰色。

当子菜单显示时内容滑动对我来说很好，这就是我想要保持的效果。

这是我想要实现的 2 张图片:

这是我的 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