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

尝试添加以下内容：

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

Answer 2

这最终是我提出的。想出一个抽象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'
        }});
};

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

2 个答案: