Question

我的菜单如下：

<nav> 
    <ul> 
        <li>
            <a href="#">Home</a>
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </li> 
        <li><a href="#books">Books</a></li> 
        <li><a href="#blog">Blog</a>
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </li> 
        <li><a href="#about">About Us</a></li> 
        <li><a href="#support">Support</a></li> 
    </ul>
</nav>

和支持JQuery以帮助激发功能：

$(function() {
    // Create the dropdown base
    $("<select />").appendTo("nav");
    // Create default option "Go to..."
    $("<option />", {
        "selected": "selected",
        "value": "",
        "text": "Go to..."
    }).appendTo("nav select");
    // Populate dropdown with menu items
    $("nav > ul > li").each(function() {
        var el = $(this);
        var hasChildren = el.find("ul"),
                children = el.find("li");
        if (hasChildren.length) {
            $("<optgroup />", {
                "label": el.find("> a").text()
            }).appendTo("nav select");
            children.each(function() {
                $("<option />", {
                    "text": " - " + $(this).text()
                }).appendTo("optgroup:last");
            });
        } else {
            $("<option />", {
                "value": el.attr("href"),
                "text": el.text()
            }).appendTo("nav select");
        }
    });
    // To make dropdown actually work
    $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
    });
});

这里的问题是，当我选择任何菜单时，它没有正确链接。浏览器上返回的网址为www.example.com/One，而不是www.example.com/#

有人可以告诉我我的代码有什么问题。

Answer 1

问题在于您使用.text()来获取元素的内容。例如：

el.find("> a").text()

使用attr("href")代替文字，如：

el.find("> a").attr("href");

每个jQuery文档： .text（）方法的结果是一个包含所有匹配元素的组合文本的字符串。

现在，我已经创建了一个JSFiddle来测试你的代码，这将使它工作：

$(function() {
    // Create the dropdown base
    $("<select />").appendTo("nav");
    // Create default option "Go to..."
    $("<option />", {
        "selected": "selected",
        "value": "",
        "text": "Go to..."
    }).appendTo("nav select");
    // Populate dropdown with menu items
    $("nav > ul > li").each(function() {
        var el = $(this);
        var hasChildren = el.find("ul"),
                children = el.find("li");
        if (hasChildren.length) {
            $("<optgroup />", {
                "label": el.find("> a").text()
            }).appendTo("nav select");
            children.each(function() {
                console.log($(this).find("> a").attr("href"));
                $("<option />", {
                    "text": " - " + $(this).text(), 
                    "value": $(this).find("> a").attr("href")
                }).appendTo("optgroup:last");
            });
        } else {
            $("<option />", {
                "value": el.find("> a").attr("href"),
                "text": el.text()
            }).appendTo("nav select");
        }
    });
    // To make dropdown actually work
    $("nav select").change(function() {
        //console.log($(this).find("option:selected").val());
        window.location = $(this).find("option:selected").val();
    });
});

您也可以使用JSFiddle进行测试和播放。

以前的版本中也缺少一些.find（“＆gt; a”）。

小屏幕的下拉菜单不能很好地连接

1 个答案: