關閉另一個打開時的任何打開的彈出/下拉菜單

Question

我有這兩個彈出菜單，他們切換進出和上下尊重。當他們出去佔據相互重疊的同一空間時。它看起來並不那麼糟糕，但如果打開的菜單在另一個被點擊打開時關閉，那會更好。將來可能會有兩個以上的菜單。所以我需要一個解決方案，當你打開一個菜單時，它同時關閉所有打開的菜單。我想他們需要一個與他們有關的課程。我不清楚如何關閉其他打開的菜單，並關閉那個我正試圖在那一刻打開的菜單。希望這是有道理的。

showFooWindow = function() { 
$('.channels-sessions-tab').click(function(){ 
    var $CSpane = $('.current-foo'); 

    var paneState = parseInt($CSpane.css('left'),10) == 0 ? -$CSpane.outerWidth()-11 : 0 

    $CSpane.animate({ 
     left: paneState 
    }, { 
     duration: 700, 
     specialEasing: { 
      width: 'linear', 
      height: 'easeOutBounce' 
     }}); 
}); 
}; 

showBarWindow = function() { 
$('.channel-session-tab').click(function(){ 
    var $CSpane = $('.current-bar'); 

    var paneState = parseInt($CSpane.css('top'),10) == 0 ? -$CSpane.outerHeight()-11 : 0 

    $CSpane.animate({ 
     top: paneState 
    }, { 
     duration: 600, 
     specialEasing: { 
      width: 'linear', 
      height: 'easeOutBounce' 
     }}); 
}); 
}; 

Answer 1

這是最終我來到了。想出一個聰明的方法來抽象flowOuRight和flownOutDown會很酷。如果我這樣做了，我可以刪除幾行代碼。

showFoo = function() { 
$('.foo-tab').click(function(){ 
    var duration = 700; 
    var element = $('.foo'); 
    var direction = {left: parseInt(element.css('left'),10) == 0 ? -element.outerWidth()-11 : 0}; 
    closeOtherFlyouts(); 
    element.addClass("flownOutRight"); 
    flyoutAnimate(direction, duration, element); 
}); 
}; 

showBar = function() { 
$('.bar-tab').click(function(){ 
    var duration = 600; 
    var element = $('.bar'); 
    var direction = {top: parseInt(element.css('top'),10) == 0 ? -element.outerHeight()-11 : 0}; 
    closeOtherFlyouts(); 
    element.addClass("flownOutDown"); 
    flyoutAnimate(direction, duration, element); 
}); 
}; 

closeOtherFlyouts = function() { 
if ($('.flownOutDown')) { 
    var duration = 600; 
    var element = $('.flownOutDown'); 
    var direction = {top: -element.outerHeight()-11}; 
    flyoutAnimate(direction, duration, element); 
    element.removeClass("flownOutDown"); 
} 

if ($('.flownOutRight')) { 
    var duration = 700; 
    var element = $('.flownOutRight'); 
    var direction = {left: -element.outerWidth()-11} ; 
    flyoutAnimate(direction, duration, element); 
    element.removeClass("flownOutRight"); 
} 
}; 

flyoutAnimate = function(direction, duration, element) { 
element.animate(
    direction, 
    { 
     duration: duration, 
     specialEasing: { 
      width: 'linear', 
      height: 'easeOutBounce' 
     }}); 
}; 

Answer 2

嘗試增加這樣的事情：

$(".flownOut")./*close your flyouts*/.removeClass(".flownOut"); 
$CSpane.addClass("flownOut"); 
$CSpane.animate({ 
     left: paneState 
    }, { .... the rest of your code