一次显示隐藏所有具有相同类的 div Java 脚本答案

【问题标题】：Show Hide All divs with same class at once Java Script一次显示隐藏所有具有相同类的 div Java 脚本
【发布时间】：2013-06-21 06:14:37
【问题描述】：

我不知道为什么，但它对我有用。可能我上传错了。 JS Fiddle Link

JS 代码

$("#toggle-content").click(function () {
    $(".otherContainers").slideToggle(500);
});

$("#closeImgPP").click(function () {
    $(this).parent().hide(500);
});

$("#closeImgPP2").click(function () {
    $(this).parent().hide(500);
});

$("#closeImgPP3").click(function () {
    $(this).parent().hide(500);
});

我有 5 个相同的 div，我关闭每个 div，例如，我只关闭 5 个 div 中的 3 个，当我使用显示/隐藏按钮时，它会隐藏当前打开的 div 并显示隐藏的 div。

问题是我如何通过单击显示/隐藏按钮来显示所有内容，然后再次单击隐藏所有内容，或者像 2 个不同的按钮，一个用于显示，一个用于隐藏

【问题讨论】：

toggle 不是你想要的，因为toggle 会隐藏所有可见的东西，并显示所有隐藏的东西。制作两个单独的按钮，一种是隐藏所有元素，另一种是显示所有元素。
是的，你绝对正确，我的大脑无法制作两个单独的按钮......它一直都是粉碎（

标签： javascript class html show-hide

【解决方案1】：

使用.show() 和.hide() 方法代替slideToggle

【讨论】：

jsFiddle 会自动完成
我在我的文件上说它工作正常，我有不同的问题

【解决方案2】：

我猜你想要这样的东西 http://jsfiddle.net/blackjim/DQ26M/9/ 如果你想把它们全部隐藏起来，你必须稍微改变你的设计（因为你将如何再次显示它们？）

$("#hide-content").click(function () {
    $(".otherContainers").hide(500);
});

$("#show-content").click(function () {
    $(".otherContainers").show(500);
});

$("#closeImgPP").click(function () {
    $(this).parent().hide(500);
});

编辑：也许 closeImgPP 应该是一个类，如果你想在每个'BLAHBLAH'中都有这个关闭

【讨论】：

【解决方案3】：

使用以下代码：

$("#toggle-content").click(function () {
    $.each($(".otherContainers"),function(){
         $(this).toggle(500);
    });
});

当您按类名使用选择器时，在文档中它是多个。所以你需要将切换应用到每个。

【讨论】：

@DenisS 当我尝试它时，您是否尝试过它在小提琴上的工作。再次检查。

【解决方案4】：

您的小提琴不加载 jQuery。在左上角，添加一个 jQuery 库。在这里查看：http://jsfiddle.net/DQ26M/7/

在您的网站上添加一些onLoad 功能可能会很好（jsfiddle 会为您执行此操作）。例如：

$(function(){ ... });

【讨论】：

【解决方案5】：

检查这个小提琴，仅供参考，你忘了在你的小提琴中包含 jquery 库http://jsfiddle.net/DQ26M/11

$("#toggle-content").click(function () {
$(".otherContainers").slideUp(500);
$(".showContent").show();
});
$(".showContent").click(function () {
    $(this).hide(); $(".otherContainers").slideDown(500);
});

【讨论】：

【解决方案6】：

$('#btns2').on('click', function() {
$('.chos').hide();
$('#icon3').hide();
$('#icon').show();
});

$('#btns').on('click', function() {
$('.chos').show();
$('#btns2').show();
$('#icon3').show();
$('#icon').hide();
});

在一个按钮中，您可以隐藏显示或同时使用类/ID 切换 div 或选择器

【讨论】：