1

我希望能够从 html 文件加载菜单并将它们用作菜单。文本将加载，但可惜它总是以简单列表的形式出现——菜单和子菜单选项都可见——而不是菜单。

这是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!");
           }
      });
 });

而不是一个功能菜单，我得到的只是一个看起来像这样的列表-y块：

 * 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()完成。在这个重载中，第二个参数是响应完成时的回调方法。

于 2013-02-03T02:25:18.870 回答