小屏幕的下拉菜單無法很好地鏈接

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()獲取元素的內容。 例如：

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”）。