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

Question

我不知道为什么，但它对我有用。可能我上传错了。JS小提琴链接

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 个不同的按钮，一个用于显示，一个用于隐藏

Answer 1

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

Answer 2

使用以下代码执行此操作：

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

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

Answer 3

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

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

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

Answer 4

我猜你想要这样的东西 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'中都有这个关闭

Answer 5

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

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

Answer 6

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

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

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