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

Posted 2023-05-08

【中文标题】jQuery 面板 - 在打开另一个 DIV 之前切换一个 DIV 关闭！

【英文标题】：jQuery Panels - Toggle one DIV closed before Toggling open another one!

【发布时间】：2011-10-01 09:41:02

【问题描述】：

我有以下代码。

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

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

    $(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);
    );
);

希望有人可以提供帮助。 扎克

【问题讨论】：

您可以通过对您的 ID 使用一些约定来大大减少代码量。看看this example，通过稍微更改您的 ID，您可以将前 6 个事件处理程序替换为 1。

【参考方案1】：

最简单的方法是：

为所有面板分配一个类（如.togglepanels）；

OnClick，先把.togglepanels全部隐藏如下：

$(".togglepanel").hide("slide", direction: "left" , 1000);

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

【讨论】：

我尝试了类似的方法，但它会产生一种非常奇怪的效果，如果您单击以切换 DIV，它首先会立即显示 div，将其滑开，然后再将其滑回.有没有办法说“如果 .togglepanel 已经隐藏，不要显示它然后再次隐藏它”？

是的，使用 jQuery 的伪类：$(".togglepanel:visible").hide("slide", direction: "left" , 1000);

我用自己的解决方案走了一条不同的道路 - 略有不同：if ($('.togglepanel').is(':visible')) $(".togglepanel").hide("slide", direction: "left" , 1000);

抱歉，我对 *** 还很陌生，如何奖励我设置的赏金？

您可以在不标记为答案的情况下奖励赏金。另外，我认为你需要在赏金期结束后等待一天才能获得赏金。

【参考方案2】：

最好的方法是：关闭所有 div，然后再打开。为此创建一个单独的函数 (ToggleAllOff)。

【讨论】：

我在 jQuery 中没有看到一个名为 togglealloff 的函数，那么我应该在函数中写什么来关闭所有 div？

你需要实现它（简单循环所有涉及的div，一个一个关闭它们）

【参考方案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. 打开任何其他面板时关闭所有打开的面板

【参考方案4】：

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

【参考方案5】：

如果我没看错你的问题，你说的是在打开另一个之前自动关闭它？

来自 jQuery 文档：

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

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