Jquery滑动面板 - 下载面板时关闭原始面板

Question

我正在尝试解决一些与jQuery有关的小问题。

基本上我要求的是当一个面板打开时，如果用户点击另一个面板的触发器，则原始面板将向上滑动并将新面板放在原位。

你可以在www.google-boost.co.uk看到我到目前为止所做的事情，两个触发器将是导航菜单上最右边的2个图标。

JsFiddle：http://jsfiddle.net/4Nx6v

我的示例代码如下所示：

$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });

        $(".btn-slide-two").click(function(){
        $("#panel2").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });

    if (!panel.is(':visible')) {
        $('.panel').hide(opts.speed);$('.btn-slide').removeClass('active');
    }
});

Answer 1

我个人的解决方案是通过数据属性连接链接和面板。这样，您只需要一段代码并在链接中共享一个类。

http://jsfiddle.net/TrueBlueAussie/4Nx6v/1/

链接是这样的：

<a href="#" class="btn-slider" data-target="#panel">

代码看起来像这样：

$(document).ready(function () {
    // Apply to all buttons of class btn-slider
    $(".btn-slider").click(function () {
        // remove active from all active links and collapse them
        $('.btn-slider.active').each(function () {
            var $link = $(this);
            $($link.attr('data-target')).slideUp("slow");
            $link.removeClass("active");
        });
        // Add active to the clicked link and slidedown the matching content
        $(this).addClass("active");
        $($(this).attr('data-target')).slideDown("slow");
        return false;
    });

    if (!panel.is(':visible')) {
        $('.panel').hide(opts.speed);
        $('.btn-slider').removeClass('active');
    }
});

此代码可以更好地转换，但是对于2分钟的预期工作有效：）

更新：http://jsfiddle.net/TrueBlueAussie/4Nx6v/3/

根据切换要求，这稍微好一些：

$(document).ready(function () {
    $(".btn-slider").click(function () {
        var $clicked = $(this);
        $('.btn-slider.active').each(function () {
            var $link = $(this);
            // If this is not the clicked link, collapse its panel
            if (!$link.is($clicked)) {
                $($link.attr('data-target')).slideUp("slow");
                $link.removeClass("active");
            }
        });
        $clicked.toggleClass("active");
        if ($clicked.hasClass("active")) {
            $($clicked.attr('data-target')).slideDown("slow");
        } else {
            $($clicked.attr('data-target')).slideUp("slow");
        }
        return false;
    });

    if (!panel.is(':visible')) {
        $('.panel').hide(opts.speed);
        $('.btn-slider').removeClass('active');
    }
});