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

Question

我正在尝试解决一些 jQuery 遇到的小问题。

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

您可以在 www.google-boost.co.uk 上看到我到目前为止的内容，这两个触发器将是导航菜单上最右边的两个图标。

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