gpt4 book ai didi

jquery - 隐藏、显示、隐藏/显示按钮

转载 作者:行者123 更新时间:2023-12-03 22:52:37 30 4
gpt4 key购买 nike

代码如下: http://jsfiddle.net/t2nite/KCY8g/

我正在使用 jquery 创建这些隐藏框。

每个框都有一些文本和一个“显示”“隐藏”按钮。我正在尝试创建一个“显示/隐藏全部”按钮。

但是当我尝试底部的代码时,整个按钮消失了。

$("#btn").toggle(function() {
$(".para2, .para3, .para4").hide(200);
$(".para2, .para3, .para4").show(200);
});

这是我能得到的最接近我想要的东西。

$("#btn").click(function() {
$(".para2, .para3, .para4").toggle(200);
});

上面的代码可以工作,但它不是隐藏或显示所有框,而是在隐藏和显示之间切换它们。帮助。

我只想隐藏内容,并且按钮不在 para 类内。

最佳答案

您需要循环遍历每个元素以检查它们是否隐藏。这实际上取决于您是想先隐藏它们还是全部显示。这是您需要的:

// To toggle each element's state
$("#btn").click(function() {
$(".para2, .para3, .para4").each(function (index, element) {
if ($(this).is(':visible')) {
$(this).hide(200);
} else {
$(this).show(200);
}
});
});

// To show all and hide all afterwards or vice-versa (change the attr check)
$("#btn").click(function() {
if ($(this).attr('data-show')) {
$(".para2, .para3, .para4").show(200);
$(this).attr('data-show', false);
} else {
$(".para2, .para3, .para4").hide(200);
$(this).attr('data-show', true);
}
});

// To hide all if one is shown
$("#btn").click(function() {
var oneShown = false;
$(".para2, .para3, .para4").each(function (index, element) {
if ($(this).is(':visible')) {
oneShown = true;
}
});
if (oneShown) {
$(".para2, .para3, .para4").hide(200);
} else {
$(".para2, .para3, .para4").show(200);
}
});

关于jquery - 隐藏、显示、隐藏/显示按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12903725/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com