0

我有这两个弹出菜单，它们可以分别进出和上下切换。当他们出去时，占据相同的空间，彼此重叠。它看起来并没有那么糟糕，但如果打开的菜单在另一个被点击打开时关闭会更好。将来可能会有两个以上的菜单。所以我需要一个解决方案，当你打开一个菜单时，它会同时关闭所有打开的菜单。我想他们需要一个与他们相关的课程。我不清楚如何关闭其他打开的菜单而不关闭我当时试图打开的菜单。希望这是有道理的。

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'
        }});
});
};
4

2 回答 2

0

尝试添加如下内容：

$(".flownOut")./*close your flyouts*/.removeClass(".flownOut");
$CSpane.addClass("flownOut");
$CSpane.animate({
        left: paneState
    }, { .... the rest of your code
于 2013-03-01T18:01:47.363 回答
0

这就是我最终想出的。想出一个聪明的方法来抽象 flowOuRight 和 flynOutDown 会很酷。如果我这样做了，那么我可以删除几行代码。

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'
        }});
};
于 2013-03-01T21:50:58.640 回答