使用jQuery的多级下拉菜单

问题描述

我想使用jQuery设计一个多级菜单.我已经写了一些代码.您可以在此处观看演示.所有这些都很好.但是我想动态制作多级下拉菜单.

I want to design a multilevel menu using jQuery.I have already written some code .You can see the demo here .All this works fine. But I want to make multilevel drop down menus dynamically.

脚本

$('ul#menu > li').hover(function(){
    //$('#drop' , this).css('display','block');
     $('.drop' , this).delay(20).slideDown(200);
}, function(){
 $('.drop' , this).delay(20).slideUp(200);
});​

HTML

<ul id="menu">
    <li><a href="#">Home</a>
        <ul class="drop">
            <li><a href="#">About us</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">About us</a></li>
        </ul>
    </li>


    <li><a href="#">about</a>
        <ul class="drop">
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
        </ul>
    </li>

</ul>​

CSS

ul#menu
{
    margin:0;
    padding:0;
}
ul#menu > li
{
    list-style:none;
    float:left;
    margin:0;
    padding:0;
    position:relative;
}
ul#menu a
{
    text-decoration:none;
    color:#fff;
    background:red;
    display:block;
    padding:10px;
}
ul#menu > li ul.drop
{
    margin:0;
    padding:0;
    width:150px;
    position:absolute;
    display:none;
}
ul#menu > li ul.drop ul
{
    margin:0;
    padding:0;
    width:150px;
    position:absolute;
    display:none;
    left:150px;
    top:0;
}
ul#menu > li ul li
{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
}​

推荐答案

您需要稍微更改jQuery脚本以适应这样的多级菜单:

You need to change the jQuery script a little to accommodate for the multilevel menus like this:

$('ul#menu li').hover(function(){
     $(this).children('ul').delay(20).slideDown(200);
}, function(){
     $(this).children('ul').delay(20).slideUp(200);
});

并像这样更改html:

and change html like this:

<ul id="menu">
    <li><a href="#">Home</a>
        <ul class="drop">
            <li><a href="#">About us</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">About us</a></li>
            <li>
                <a href="#">About us</a>
                <ul>
                    <li><a href="#">Sub Item 1</a></li>
                    <li>
                        <a href="#">Sub Item 2</a>
                        <ul>
                            <li><a href="#">Sub item 3</a></li>
                            <li><a href="#">Sub item 4</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>


    <li><a href="#">about</a>
        <ul class="drop">
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
        </ul>
    </li>
</ul>

您的CSS没问题.您可以在以下位置查看更新的多级代码: http://jsfiddle.net/297t6/

Your css is fine.You can check the updated multilevel code at: http://jsfiddle.net/297t6/

这篇关于使用jQuery的多级下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！