1

html ファイルからメニューを読み込んで、メニューとして機能させたいと考えています。テキストは読み込まれますが、残念なことに、メニューではなく、常に単純なリスト (メニューとサブメニューの選択肢がすべて表示されます) として表示されます。

ここに、私のテスト ファイルの 1 つである shortmenu.html があります。

<ul id="menuChap">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Item 3-1</a></li>
<li><a href="#">Item 3-2</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>

これは、無意味なトークン アクションを備えた、試行された最も単純なスクリプトです。

 $(document).ready(function() {

      $('#menuDiv').load('shortmenu.html');

      $('#menuChap').menu({
           select: function(event, ui){
                alert("Pushed!");
           }
      });
 });

これは、他のタスクに移る前にロードが完了していることを確認するための時間の無駄なアラートを備えた別のものです。

 $(document).ready(function() {

      $('#menuDiv').load('shortmenu.html', function() {
           alert("Load is finished");
      });

      $('#menuChap').menu({
           select: function(event, ui){
                alert("Pushed!");
           }
      });
 });

これは、新しい .on 関数を使用した別の例です。

 $(document).ready(function() {

      $('#menuDiv').on('click', function(e) { 
           e.preventDefault(); 
           $('#menuDiv').load('shortmenu.html'); 
           alert("Load is finished");
      });

      $('#menuChap').menu({
           select: function(event, ui){
                alert("Pushed!");
           }
      });
 });

そして、機能するメニューの代わりに、私が得るのは次のようなリストの塊だけです:

 * Item 1
 * Item 2
 * Item 3
      * Item 3-1
      * Item 3-2
      * Item 3-3
      * Item 3-4
 * Item 4
 * Item 5

それで、私は何を見ていませんか？ここで誰かが私に良い実例を教えてくれますか?

ありがとうございました！

4

1 に答える 1

1

やってみました：

$(function() {
      $('#menuDiv').load('shortmenu.html', function() {
          $('#menuChap').menu({
              select: function(event, ui){
                alert("Pushed!");
              }
          });
      });
});

Ajax 呼び出しは非同期であるため、.menu()呼び出しは が終了するまで待機する必要があります.load()。このオーバーロードでは、2 番目のパラメーターは、応答が完了したときのコールバック メソッドです。

于 2013-02-03T02:25:18.870 に答える