Question

您可以帮助我将无序列表导航转换为下拉导航吗？

目前我使用此脚本

  $(function() {

    if (document.getElementById("level-2")) {
        initElement("#level-2");
    }
    if (document.getElementById("level-3")) {
        initElement("#level-3");
    }
    if (document.getElementById("embedded-level-3")) {
        initElement("#embedded-level-3");
    }


    function initElement(element) {
        $("<select />").appendTo(element);

        // Create default option "Go to..."
        $("<option />", {
            "selected": "selected",
            "value"   : "",
            "text"    : "Go to..."
        }).appendTo("nav"+element+" select");

        $(element + " a").each(function() {
            var el = $(this);
            $("<option />", {
            "value" : el.attr("href"),

            "text"  : el.text()
        }).appendTo(element + " select");
    });

        $(element + " select").change(function() {
            window.location = $(this).find("option:selected").val();
        });}
});

此脚本会转换此列表＆＃34; li＆＃34;标签以选择＆gt;选项标签下拉列表

活动页面由a.active(a class="active")定义。

是否可以更改脚本以将链接从类＆＃34;活动＆＃34;和下拉菜单中第一个位置上的链接中的文字选择＆gt;选项而不是＆＃34;转到...＆＃34;？

更新要清楚，我正在寻找什么。

需要找到类＆＃39;活跃＆＃39;从列表中，将其放在选择下拉列表的第一个位置amd然后将列表中的所有其他元素放入select dropdwon

从此

<nav>
    <ul>
    <li><a href="link1">Link 1</a></li>
    <li class="active"><a href="link2" class="active">Link 2</a></li>
    <li><a href="link3">Link 3</a></li>
    </ul>
</nav>

到此

<select>
<option class="active" value="link2>Link 2</option>
<option value="link1>Link 1</option>
<option value="link3>Link 3</option>
</select>

Answer 1

是的，有可能，试试这个：

    $("<option />", {
        "selected": "selected",
        "value"   : "",
        "text"    : "Go to...", //Remove if you dont need it.
        "class"   : "active"
    }).appendTo("nav"+element+" select");

将无序列表（ul标签）导航转换为下拉导航（选择标记）

1 个答案: