javascript - 切换div动画

尝试使此动画起作用，因此一次仅打开一个content5 div，当前有3个heading5 div和三个content 5 div。如果单击标题5链接之一以“打开” content5子级，则其他content5子级应关闭它们的打开状态。我知道这应该很容易，但是我似乎无法实现，我一直在学习很多杂乱无章的东西。需要看更多的克罗克福德。在此先感谢您的帮助。

$(document).ready(function() {
  $(".content5").hide();
  $(".heading5").click(function()
  {
    $(this).next(".content5").animate({width: 'toggle'}, 'slow');
  });
});

这是HTML

<div class="heading5 menu-item-text" id="leftend">About</div>
<div class="content5 clearfix" id="menu-1">
  //Links in here
</div>
<div class="heading5 menu-item-text"><a href"#" data-target="2">Contact</a></div>
<div class="content5 clearfix"  id="menu-2">
      //More links in here
</div>
<div class="heading5 menu-item-text" data-target="3"><a href"#">Portfolio</a></div>
<div class="content5 nav clearfix" id="menu-3"  data-option-key="filter">
//and more in here
</div>

这是一个小提琴http://jsfiddle.net/jkuhns/NRsXS/

我意识到将菜单打开宽度方向可能会被截断的危险，但是我为不同的屏幕尺寸设置了不同的菜单样式，因此我应该可以。在小提琴中，请忽略可怕的鼠标悬停效果，我正在与尚未击败的查询移动中的css样式作斗争，因此暂时将鼠标悬停直到得到它为止。

最佳答案

就在行前

$(this).next(".content5").animate({width: 'toggle'}, 'slow');

加

$('.content5').animate({width: 0}, 'slow')

编辑：小提琴中的更新代码：jsfiddle.net/fNZaV/2