Javascript 折叠菜单内容

我有一个折叠的ul菜单，但是当它的宽度被切换时，每个菜单里的内容都有点滑稽

我试过了。滑动切换，但无法让它滑动到右按钮div

它工作得很好，只是有点笨重。我假设有一个css规则可以解决我的问题，但我有点卡住了

这是我正在使用的规则，您可以在JSFIDLE中看到

   $(document).ready(function() {
  $('#menu-active').click(function() {
    $('#menu').animate({width: 'toggle'})
       });
});

我是javascript新手，所以我确信有一个更好的方法我不知道

---

谢谢

好的。早些时候我误解了你的问题。以下是带有幻灯片效果的更新答案。但问题是，您还需要使用jQueryUI。看看我的小提琴

$(document).ready(function() {
 $('#menu-active').click(function() {
  $('#menu').toggle('slide', {direction: 'right'}, 1000);
   });

  $('#close').click(function() {
$('#menu').toggle('slide', {direction: 'right'}, 1000);
});
});

---

我已对您的代码进行了修改。存在冗余的

$（document）.ready（）和其他。我还修改了你的css代码

我只是在我所做的修改中创造了一个“幻觉”，我希望这就是你想要的

这是最新消息。
你能详细解释一下“有点滑稽”吗？你指的是垂直滚动条出现/消失时的口吃吗？对于每个事件处理程序，你不需要一个
ready（）
函数，你应该将它们写在一个
ready（）
函数中……并且你不需要多个处理程序监听同一元素的同一事件。。您可以在单个处理程序中编写代码。@user3008011它变得有点笨重，菜单文本在下面移动，因为我假设它的空间不足。section.menu add overflow hidden，这消除了出现的滚动条，也不是所有内容都必须在单独的文档中准备就绪，而且ame文档中的多个id无效。在发送jquery、css等垃圾信息之前，最好花点时间来了解它们的实际功能……似乎对任何事情都没有影响，内容仍然会随着宽度的增加相互叠加shrinks@user2260099，您可以将
1000
更改为
500
或更小，以使其动画速度更快（如果需要）：@dunili只有一个问题，如何让菜单在加载时开始隐藏？@user2260099嘿，很抱歉回复太晚，您只需将此代码添加到
$（document.ready（）：
$（'.menu'）.css（{right:-（$（'.menu'）.width（））}）-这样就可以了：）