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 回答