Verhalten der Dropdown-Animation beim Klicken auf Dropdown-Schaltflächen ändern

Question

Mein Dropdown-Menü funktioniert derzeit einwandfrei, aber gibt es eine Möglichkeit, das Verhalten der Animation zu ändern, wenn auf eine andere Schaltfläche in einem Dropdown-Menü geklickt wird.

Wenn Sie zum Beispiel auf eine Menüschaltfläche klicken, wird ein Menü angezeigt. Wenn dieses Menü jedoch geöffnet ist, klicken Sie auf eine zweite Schaltfläche, die statt wie üblich herunterfährt, wenn keines der Menüs geöffnet ist das Recht, während das Menü, das zuvor geklickt wurde, nach links herausgleitet. Ähnlich wie das theverge.com Dropdown-Menü.

<div class="menu1"> 

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

<div id="menu1Dropdown"> 

</div> 

</div> 

Dies ist nur die Grundstruktur jedes Menüs, das zählt.

Darüber hinaus ist dies die Jquery, die in der Dropdown-

$(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/

dank

Answer 1

Sie müssten initiiert nur eine Bedingung um Ihre Animationen einrichten, wenn die andere zu sehen schaut Das Menü ist geöffnet. Etwas wie folgt aus:

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

Auch merke ich, dass Sie slidedown Animation verwenden. Es gibt kein slideLeft oder slideRight, aber Sie können diese Art von Funktionalität mit jQueryUI hinzufügen, oder Sie könnten CSS-Übergänge verwenden und einfach Javascript verwenden, um Klassen hinzuzufügen und zu entfernen, anstatt css-Eigenschaften direkt festzulegen.