单击下拉按钮时更改下拉动画的行为

Question

我的下拉菜单目前可以正常工作，但是如果单击了下拉菜单上的另一个按钮，则有一种方法可以更改动画的行为。

例如，单击菜单按钮会下拉菜单，但是当该菜单打开时，您单击的是第二个按钮，而不是像在没有菜单打开的情况下那样通常那样下拉，而是在菜单打开时从右侧滑入。先前单击的菜单向左滑动。 与theverge.com下拉菜单的操作类似。

<div  class="menu1"> 

<div class="menu1Container"><p class="menu1TextContainer">BUTTON1</p></div>

<div id="menu1Dropdown"> 

</div>

</div>

这只是每个菜单的基本结构，其数量是最多的。

此外，这是启动下拉列表的jQuery

$(function() {

// Dropdown toggle
  $('.menu1Container').click(function(){
  $(this).next('#menu1Dropdown').slideToggle(100);
  });

$(document).click(function(e) {
    var target = e.target;
 if (!$(target).is('.menu1') && !$(target).parents().is('.menu1')) {
 $('#menu1Dropdown').slideUp(100);
 }
 });

});

https://jsfiddle.net/9j3k61rg/8/

谢谢

Answer 1

您只需要在动画周围设置一个条件即可查看其他菜单是否打开。 像这样：

if ($(".menu1Dropdown").css("display") == 'none') {
    // do my normal animation to menu 2
} else {
    // do some other animation to menu 2
}

我也注意到您正在使用slideDown动画。 没有slideLeft或slideRight，但是您可以使用jQueryUI添加这种功能，或者可以使用CSS过渡，而仅使用Javascript添加和删除类，而不必直接设置css属性。