无法进行响应式导航答案

【问题标题】：Unable to make responsive navigation无法进行响应式导航
【发布时间】：2013-06-11 09:21:17
【问题描述】：

我正在使网站具有响应性。我正在使用以下代码将导航设置为移动设备的选择框。但是代码不起作用。我错过了什么吗？

<nav id="main-nav">
<table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <!--START: menuitems_view-->
        <!--START: TOP_LINK_FORMAT-->
        <td nowrap="nowrap">
            <a href="infopage.asp?page=[link_id]"
               class="menu" target="[link_target]">
               [link_name]
            </a>
        </td>
        <!--END: TOP_LINK_FORMAT-->
        <!--END: menuitems_view-->
    </tr>
</table>
<select></select>

脚本代码如下：

<script>
$(document).ready(function() {  
//Appending Select in NAv for Small Resolutions Devices

// Create the dropdown base
$("<select />").appendTo("#main-nav");

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

// Populate dropdown with menu items
$("#main-nav a, #main-nav a").each(function() {
    var el = $(this);
    $("<option />", {
        "value"   : el.attr("href"),
        "text"    : el.text()
    }).appendTo("#main-nav select");
});
$("#main-nav select").change(function() {
       window.location = $(this).find("option:selected").val();}
    );

});

</script>

【问题讨论】：

你有什么问题？
如果您的问题是菜单显示两次，请删除 HTML 中的 <select> 或删除脚本中的 create dropdown base。

标签： javascript jquery html mobile navigation

【解决方案1】：

首先我不确定你想要达到什么目的，所以只写我看到的几个错误。

首先 HTML 已损坏 nav 标记缺少结束标记。

另一件事是你已经在 nav 标签的末尾有选择标签，但你仍然通过 jQuery 创建自己的标签，.appendTo("#main-nav select") 添加了这两个选项。如果你只想要一个删除<select></select>

除了这些之外，选项的创建很好，更改事件也有效。

【讨论】：