Question

我有这个菜单：

<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代码完成了考虑子菜单项的工作，但生成的列表没有缩进下拉列表中的子菜单项。

我想要的是下拉列表项目前面的“ - ”（如果它们实际上是原始菜单子菜单项），那么它们很容易被识别出来。

希望这是有道理的。

请指教，谢谢。

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

});

Answer 2

以下代码适用于任何深度/复杂度的菜单：

See this working demo.

// 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>文本。此脚本可以在菜单的深处使用，并且可以根据需要使用尽可能多的子菜单项，而无需进一步操作。

希望这有帮助！

根据现有菜单创建html下拉菜单

2 个答案:

See this working demo.