1

我正在尝试为我的响应式网站创建第二个导航菜单。当小屏幕访问该站点时，应该会出现一个下拉菜单而不是完整菜单。我用来完成这项工作，但由于某种原因，选择菜单似乎没有出现。

这是我的 HTML：

    <nav class="container clearfix primary">
    <div class="sixteen columns">
        <ul>
            <li><a href="../index.html">home</a></li>
            <li><a href="../about.html">about</a></li>
            <li><a href="../services.html">services</a></li>
            <li><a href="../partners.html">partners</a></li>
            <li><a href="../research.html" class="selected">research</a>

                <ul>
                    <li><a href="extracts.html">Key Extracts & Findings</a></li>
                    <li><a href="contents.html">Report Contents</a></li>
                    <li><a href="segments.html">Mobile VUI Segments</a></li>
                    <li><a href="contributors.html">Participants & Contributors</a></li>
                    <li><a href="bibliography.html">Bibliography</a></li>
                </ul>

            </li>
            <li><a href="../contact.php">contact</a></li>
        </ul>
    </div>
</nav>

这是我的jQuery：

$(document).ready(function() {

//build dropdown
$("<select />").appendTo(".primary div");

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

// Populate dropdowns with the first menu items
$(".primary div ul 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();
});

});

4

0 回答 0