jQuery 面板 - 在打开另一个 DIV 之前先关闭一个 DIV!

Question

我有以下代码。

我想知道是否有一种方法可以检测某个面板是否打开，如果是，则在打开另一个面板之前自动将其关闭？当用户单击按钮时应该发生此检测。

我尝试在每个面板功能中添加“隐藏”功能，但它没有按预期工作。这是我当前的代码:

    $(function() {
    $("#panel-2-button").click(function() {
        $("#content-inner-panel-2").toggle("slide", { direction: "left" }, 1000); 
    });
    $("#panel-2-button-medium").click(function() {
        $("#content-inner-panel-2-medium").toggle("slide", { direction: "left" }, 1000);
    });
    $("#panel-2-button-large").click(function() {
        $("#content-inner-panel-2-large").toggle("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-button").click(function() {
        $("#content-inner-panel-3").toggle("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-button-medium").click(function() {
        $("#content-inner-panel-3-medium").toggle("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-button-large").click(function() {
        $("#content-inner-panel-3-large").toggle("slide", { direction: "left" }, 1000);
    });
    $("#panel-2-close").click(function() {
        $("#content-inner-panel-2").hide("slide", { direction: "left" }, 1000);
    });
    $("#panel-2-close-medium").click(function() {
        $("#content-inner-panel-2-medium").hide("slide", { direction: "left" }, 1000);
    });
    $("#panel-2-close-large").click(function() {
        $("#content-inner-panel-2-large").hide("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-close").click(function() {
        $("#content-inner-panel-3").hide("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-close-medium").click(function() {
        $("#content-inner-panel-3-medium").hide("slide", { direction: "left" }, 1000);
    });
    $("#panel-3-close-large").click(function() {
        $("#content-inner-panel-3-large").hide("slide", { direction: "left" }, 1000);
    });
});

希望有人能帮忙。 扎克

Answer 1

最简单的方法是:

为所有面板分配一个类(如.togglepanels)；

OnClick，首先隐藏所有.togglepanels，如下所示:

$(".togglepanel").hide("slide", { 方向: "向左"}, 1000);

然后切换打开您想要打开的那个。