Question

尝试使这个动画工作，所以一次只打开一个content5 div，目前有3个heading5 div和3个内容5 div。如果单击其中一个heading5链接以“打开”content5子项，则其他content5子项应该关闭它们是打开的。我知道这应该很简单，但我似乎无法将其拉下来，我不断学习这么多。需要多看Crockford。提前感谢您的帮助。

$(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风格，我尚未击败，所以暂时我放入鼠标悬停，直到我得到它。

Answer 1

就在行

之前

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

添加

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

编辑：更新了代码：jsfiddle.net/fNZaV/2

切换div动画

1 个答案: