Javascript jQuery滑动菜单困难

我正在尝试创建一个具有很酷的滑动/淡入效果的多层菜单。现在，它在我第一次点击时就工作了，但在那之后它就失败了

HTML

<ul id="menu">
<li>
    Development
    <div>
        <ul>
            <li>Sub 1</li>
            <li>Sub 2</li>
        </ul>
    </div>
</li>
<li>
    Story
    <div>
        <ul>
            <li>Sub 1</li>
            <li>Sub 2</li>
        </ul>
    </div>
</li>
<li>
    News
    <div>
        <ul>
            <li>Sub 1</li>
            <li>Sub 2</li>
        </ul>
    </div>
</li>
</ul>​

CSS

#menu {
    cursor: pointer;
    width: 150px;
}

#menu div {
    display: none;
    width: 100%;
}

#menu li ul {
    display: none;
    margin-left: 25px;
}

我遇到的第一个有趣的问题是，我的菜单不是滑动的，而是“弹出”的。这是因为div直到显示其中的元素时才占用空间。所以我通过给它一个固定的区域来克服它。（宽度在CSS中设置，高度在JavaScript中设置）。我想这就是问题所在，我插入一个虚拟元素，读取它的高度，将其分配给div，然后删除该元素。我知道这很粗略，但我找不到更好的方法

不管怎样，当我第一次点击菜单项时，它工作得非常好。但是，当我尝试第二次单击时，似乎没有为div设置高度，并且没有滑动效果

---

您可能还注意到，我没有尝试为动画处理

.stop（）

，而是解除了单击处理程序的绑定，然后在所有动画完成后重新绑定它们。这是故意的，我在加入之前遇到了这个问题。如果有人能告诉我如何修复，我将不胜感激。

请使用此代码，而不是您的代码：

#menu {
    cursor: pointer;
    width: 150px;
}

#menu div {
    display: none;
    width: 100%;
}

#menu li ul {
    margin-left: 25px;
}

JS

---

这里是一个演示：

问题在于克隆高度的代码。我不确定为什么它只对第一个单击的元素起作用，但您可以通过简单地在css中设置此元素的高度来修复它：

#menu div {
    display: none;
    width: 100%;
    height: 40px;
}

#menu li ul {
    display: none;
    margin-left: 25px;
    height: 40px;
}

---

删除用于克隆和修改高度的js代码后，它在JSFIDLE中看起来还可以：

我刚才做的。如果您希望类似菜单的代码更少，可能会很有用：我正在尝试获得向下滑动的效果，然后逐渐消失，而不仅仅是向下滑动。我想我可以这样做，但我希望找到一种自动获取高度的方法，所以当我从菜单中添加/删除内容时，我不必担心一次又一次地调整CSS。您可以通过一个简单的取决于线宽的操作为组件指定一个高度：$div.CSS（{height:$ul.children（）.lenght*$ul.CSS（'lineheight'）}）；您不需要克隆和计时器，它们要复杂得多。

 $("#menu > li").click(function(){
      $('#menu .active').slideUp(350).removeClass('active');
      $(this).find('div').slideDown(350,function() {
          $(this).addClass('active');
      });
 });

#menu div {
    display: none;
    width: 100%;
    height: 40px;
}

#menu li ul {
    display: none;
    margin-left: 25px;
    height: 40px;
}