單擊下拉按鈕時更改下拉動畫的行為

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屬性。