关闭另一个打开时的任何打开的弹出/下拉菜单

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