1

私はこのメニューを持っています：

<nav>
    <ul>
        <li><a class="index" href="/">Home</a></li>
        <li><a href="#">Other</a>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>                               
        </li>
        <li><a class="news" href="#">News</a></li>
    </ul>
</nav>

ページの読み込み時に jQuery を使用してドロップダウン (選択) リストを生成する必要があります。

これまでのところ、私は持っています:

<script>
$(document).ready(function() {        

        //build dropdown
        $("<select />").appendTo("nav");

        // Create default option "Go to..."
            $("<option />", {
            "selected": "selected",
            "value"   : "",
            "text"    : "Go to..."
            }).appendTo("nav select");  

            // Populate dropdowns with the first menu items
            $("nav li a").each(function() {
                var el = $(this);
                $("<option />", {
                    "value"   : el.attr("href"),
                    "text"    : el.text()
                }).appendTo("nav select");
            });

            //make responsive dropdown menu actually work           
            $("nav select").change(function() {
                window.location = $(this).find("option:selected").val();
            });

});
</script>

この jQuery コードはサブメニュー項目を考慮してジョブを実行しますが、生成されたリストはドロップダウン リストのサブメニュー項目をインデントしません。

私がしたいのは、ドロップダウン リスト項目の前に「 - 」を付けて (それらが実際にオリジナルのメニュー サブメニュー項目である場合)、簡単に識別できるようにすることです。

これが理にかなっていることを願っています。

アドバイスをください、ありがとう。

4

2 に答える 2

1

http://jsfiddle.net/kasperfish/tXdBa/1/

このメソッドは、ネストされた ul タグに「ネストされた」クラスを追加することで機能します。

$(document).ready(function() { 

    //build dropdown
    $("<select />").appendTo("nav");

    // Create default option "Go to..."
        $("<option />", {
        "selected": "selected",
        "value"   : "",
        "text"    : "Go to..."
        }).appendTo("nav select");  

        // Populate dropdowns with the first menu items
        $("nav li a").each(function() {
            var el = $(this);
            if(!el.closest('.nested').length > 0){
                intend='';                
            }else{
                intend='---';
            }
            $("<option />", {
                "value"   : el.attr("href"),
                "text"    : intend+el.text()
            }).appendTo("nav select");
        });

        //make responsive dropdown menu actually work           
        $("nav select").change(function() {
            window.location = $(this).find("option:selected").val();
        });

});
于 2013-10-03T14:28:24.677 に答える
0

次のコードは、あらゆる深さ/複雑さのメニューで機能するはずです。

この動作デモを参照してください。

// Populate dropdowns with the first menu items
$("nav ul li a").each(function () {
    var el = $(this),
        depth = el.parents("ul").length - 1,
        indent = "";
    for (var i = 0; i < depth; i++) {
        indent = indent + " - ";
    }
    $("<option />", {
        "value": el.attr("href"),
        "text" : indent + el.text()
    }).appendTo("nav select");
});

これは、各リンクが持つ親要素の数に基づいて「深さ」を計算し、それに応じてテキスト<ul>をインデントします。<option>このスクリプトは、それ以上の操作をしなくても、必要なだけメニューの深い部分とサブメニュー項目で機能します。

お役に立てれば！

于 2013-10-03T14:18:33.050 に答える