1

jQuery を使用してマルチレベル メニューを設計したいと考えています。私はすでにいくつかのコードを書いています。ここでデモを見ることができます。これはすべて正常に機能します。しかし、マルチレベルのドロップダウン メニューを動的に作成したいと考えています。

脚本

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

3 に答える 3

3

次のようなマルチレベル メニューに対応するには、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/で確認できます。

于 2012-05-18T06:21:09.577 に答える
0 
$(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/

于 2012-05-18T07:24:26.287 に答える
0

マウスクリックイベントでもドロップダウンメニューを操作するには、このコードを使用します。

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

次のようにいくつかのクラスまたは ID を html に追加します。

<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);
    });

プロジェクトでブートストラップを使用している場合は、ここでブートストラップ クラスを使用しないでください。ブートストラップは一部の機能をオーバーライドできるため、別の固有のクラスを使用してください。

于 2021-01-30T07:47:36.510 に答える