javascript - 小屏幕的下拉菜单链接不好

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

这里的问题是，当我选择任何菜单时，它都无法正确链接。浏览器返回的 URL 是例如 www.example.com/One 而不是 www.example.com/#

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

Answer 1

问题是您正在使用 .text() 来获取 a 元素的内容。例如:

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("> a") 。