Javascript jQuery-使我的类递归

我想做的是制作一个多级菜单。菜单可以有用户想要的任意多个子菜单。我只想首先显示最上面的菜单，但在用户单击一个项目后，我希望菜单向下滑动并显示该项目的子菜单。然后，用户可以单击其中一个项目以展开下一个子菜单，依此类推

因此，在我进入第三个子菜单后，处理子级别的动画变得有点棘手。我决定重新开始，为我的菜单制作一个类来处理逻辑。我不熟悉JavaScript类，但到目前为止，我有以下几点：

function Menu(ul, parent){
  $ul = $(ul);
  this.lis = [];
  this.parent = parent || false;

  $ul.children('li').each(function(i, li){
    this.lis.push(new Li(li, this));
  });
}

function Li(li, menu){
  $li = $(li);

  if($li.children('div').length)
    this.submenu = new Menu($($li.children('div')[0]).children('ul')[0], menu);
  else
    this.submenu = false;
}

var m = new ​Menu($('#menu'));​​​

我用于此子菜单的动画也不是典型的

slideDown

。我让菜单向下滑动，然后子菜单淡入。因此，在我的HTML中，我只是将子菜单包装在一个div中，

slideDown

div，然后

fadeIn

ul。下面是我的HTML的样子（请记住，在任何级别上可以有任意数量的项，也可以有任意数量的级别）：

菜单项1


子菜单项1


子菜单项2

子菜单项1
子菜单项2



子菜单项3



菜单项2

我想编写一个类，这样

项就可以知道它在菜单中的位置。因此，当我必须使用动画关闭菜单并打开另一部分时，我可以使用简单的类调用，而不是自己跟踪代码。显然，我刚开始写这段代码，但我无法通过这一部分，因为我不知道怎么做

---

发生的情况是，

菜单项1

被添加到

this.lis

，然后

子菜单项1

，但项2不会被添加，我得到错误

未捕获的类型错误：无法调用未定义的方法“push”

，因此，由于我正在创建新的菜单对象，

this

似乎失去了跟踪。所以我不知道我能做些什么来让这一切顺利。谁能给我解释一下吗？

我花了一点时间才理解这个问题，但我相信我已经弄明白了

所以，关于“这个”上下文丢失的说法是正确的。你几乎做到了让事情保持一致。您要做的是在变量内部传递“this”上下文，允许下一次传递在其上下文中正确使用“this”关键字（我希望这是有意义的）

在这里，也许更容易向您展示：

function Menu(ul, parent){
    var myMenu = this;
    $ul = $(ul);
    myMenu.lis = [];
    myMenu.parent = parent || false;

    $ul.children('li').each(function(i, li){
        // the "this" keyword in this function context is not the same as the one above
        // which is why you want to use a variable to carry it down from above

        // $(this) will actually reference your "li" element
        myMenu.lis.push(new Li(this, myMenu));
    });
}

function Li(li, menu){
    $li = $(li);

    if($li.children('div').length){
        this.submenu = new Menu($($li.children('div')[0]).children('ul')[0], menu);
    } else {
        this.submenu = false;
    }
}

var m = new ​Menu($('#menu'));​​​

我还没有测试过这段代码，但我很有信心它会适合你。希望有帮助

function Menu(ul, parent){
$ul = $(ul);
this.lis = [];
this.parent = parent || false;

$ul.children('li').each(function(i, li){
  this.lis.push(new Li(li, this));
});
}

for each循环中的“this”具有错误的上下文，您希望

function Menu(ul, parent){
$ul = $(ul);
this.lis = [];
this.parent = parent || false;
var that = this/
$ul.children('li').each(function(i, li){
  that.lis.push(new Li(li, that));
});
}

---

为什么不使用jquery切换或slideToggle？？您可以在此处查看文档：&

function Menu(ul, parent){
$ul = $(ul);
this.lis = [];
this.parent = parent || false;
var that = this/
$ul.children('li').each(function(i, li){
  that.lis.push(new Li(li, that));
});
}