0

サイトをレスポンシブにしています。次のコードを使用して、ナビゲーションをモバイル デバイスの選択ボックスとして作成しています。しかし、コードは機能していません。何か不足していますか？

<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>
4

1 に答える 1

1

まず第一に、あなたが何を達成しようとしているのかわからないので、私が見たいくつかの間違いを書いているだけです.

まず、HTML が破損しており、nav タグに終了タグがありません。

もう 1 つは、nav タグの最後に既に select タグがありますが、jQuery で独自のタグを作成し、.appendTo("#main-nav select")両方のオプションを追加することです。1つだけ削除したい場合<select></select>

これらとは別に、オプションの作成は問題なく、変更イベントは機能します。

于 2013-06-11T10:18:44.600 に答える