1

试图使这个动画工作，所以一次只打开一个 content5 div，目前有 3 个标题 5 div 和 3 个 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 风格作斗争，所以目前我将鼠标悬停在我得到它之前。

4

1 回答 1

0

就在行前

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

添加

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

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

于 2013-02-27T05:47:51.013 回答