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

Jquery Slide panel - Close original panel when next panel loaded

本文关键字：原始 下一个 Jquery 加载      更新时间：2023-09-26

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

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

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

小提琴：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');
    }
});

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

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');
    }
});
相关文章：