열려있는 플라이 아웃/드롭 다운이 다른 플라이 아웃을 닫을 때 닫습니다.

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와 flowInOutDown을 추상화하는 영리한 방법을 제시하는 것이 좋습니다. 내가 그랬다면 몇 줄의 코드를 제거 할 수있었습니다.

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