使用 Jquery 的多级下拉菜单

Posted 2023-05-08

【中文标题】使用 Jquery 的多级下拉菜单

【英文标题】：Multi Level Drop Down Menu Using Jquery

【发布时间】：2012-05-25 17:07:03

【问题描述】：

我想使用 jQuery 设计一个多级菜单。 我已经写了一些代码。你可以看演示here。 这一切都很好。但我想动态制作多级下拉菜单。

脚本

$('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;
​

【参考方案1】：

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

$('ul#menu li').hover(function()
     $(this).children('ul').delay(20).slideDown(200);
, function()
     $(this).children('ul').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>
                <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/

【参考方案2】：

$(document).ready(function () 
            var data = [ 'Name': 'Home', 'Url': '#', 'SubMenu': [ 'Name': 'Home1', 'Url': '#' ,  'Name': 'Home2', 'Url': '#' ,  'Name': 'Home3', 'Url': '#' ,  'Name': 'Home4', 'Url': '#' , ] ,  'Name': 'AboutUs', 'Url': '#', 'SubMenu': [ 'Name': 'AboutUs1', 'Url': '#' ,  'Name': 'AboutUs2', 'Url': '#' ,  'Name': 'AboutUs3', 'Url': '#' ,  'Name': 'AboutUs4', 'Url': '#' , ]];

            if (data.length > 0) 
                $('body').prepend('<ul id="menu"><ul>');

                $.each(data, function (i, entity) 
                    var liHtml = [];
                    liHtml.push('<li><a href="' + entity.Url + '">' + entity.Name + '</a>');
                    if (entity.SubMenu.length > 0) 
                        liHtml.push('<ul class="drop">');
                        $.each(entity.SubMenu, function (i, subEntity) 
                            liHtml.push('<li><a href="' + subEntity.Url + '">' + subEntity.Name + '</a>');
                        );
                        liHtml.push('</ul>');
                    
                    liHtml.push('</li>');

                    $('ul#menu').append(liHtml.join(''));
                );
            



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

现场演示见此链接：http://jsfiddle.net/nanoquantumtech/Z5NXv/

【讨论】：

感谢上述解决方案。但是您的解决方案仅适用于 2 级菜单项。即父母和孩子。你能说我怎样才能有无限级别的菜单吗？

【参考方案3】：

要使用鼠标单击事件来处理下拉菜单，请使用此代码。

    $('.getdown a.toggle').on('click', function(e) 
        $(this).next('ul').slideToggle(250);
        e.preventDefault(); // to prevent following the link
    );

并像这样向您的 html 添加一些类或 ID，

<ul id="menu">
    <li class="getdown">
        <a href="#" class="toggle">Home</a>
        <ul>
            <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 class="getdown">
        <a href="#" class="toggle">about</a>
        <ul>
            <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>​

要使用悬停试试这个，

    $(".getdown").hover( function() 
        $(this).children('ul').hide();
        $(this).children('ul').slideDown(250);
    , function() 
        $('ul', this).slideUp(250);
    );

如果您在项目中使用引导程序，请不要在此处使用引导程序类。使用另一个独特的类，因为引导程序可以覆盖某些功能。