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", { direction: "left" }, 1000);

然后切换打开你要打开的那个。

Answer 2

最好的方法是：在切换内容之前，关闭所有div 。为它创建一个单独的函数（ToggleAllOff）。

Answer 3

您需要分两步完成此操作，为所有面板提供panel类。然后使用以下代码：

$(document).ready(function(){
    $('.panel').hide("slide", { direction: "left" }, 1000);
});

$('.panel').live('click',function(){
    $('.open-panel').hide("slide", { direction: "left" }, 1000);
    $(this).addClass('.open-panel').toggle("slide", { direction: "left" }, 1000);
});

这段代码会 1.加载页面时关闭所有面板 2.打开任何其他面板时关闭所有打开的面板

Answer 4

您可以将mousedownoutside处理程序绑定到每个div并隐藏其中的所有其他处理程序。您需要此jquery plugin才能启用外部事件。

Answer 5

如果我正确地阅读了您的问题，您说在切换另一个问题之前会自动将其关闭？

来自jQuery docs：

.hide( [duration,] [easing,] [callback] )
.hide( [duration,] [callback] )

动画完成后调用回调。因此，在隐藏元素之后，您可以在回调函数中运行.toggle。这将在另一个div关闭后切换另一个div（并且不会同时关闭和打开）。

jQuery面板 - 在切换另一个之前切换一个DIV关闭！

5 个答案: