javascript - Jquery Slide panel - 加载下一个面板时关闭原始面板

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