Trung tâm cá nhân
sách gpt4 ai đã đi

jQuery - Ẩn, Hiển thị, Ẩn/Hiển thị các nút

In lại 作者：行者123 更新时间：2023-12-03 22:52:37 31 4
mua khóa gpt4 Nike

Mã như sau: http://jsfiddle.net/t2nite/KCY8g/

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

每个框都有一些文本和一个“显示”Và“隐藏”按钮。我正在尝试创建一个“显示/隐藏全部”cái nút.

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

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

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

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

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

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

1 Câu trả lời

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

// To toggle each element's state
$("#btn").click(function() {
   $(".para2, .para3, .para4").each(function (index, element) {
       if ($(this).is(':visible')) {
           $(this).hide(200);
       } khác {
           $(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);
   } khác {
       $(".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);
   } khác {
       $(".para2, .para3, .para4").show(200);
   }
});

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

31 4 0
Bài viết được đề xuất: jquery - Autosuggest tag-it jquery - 如何在回发时获取 ID 和标题？
Bài viết được đề xuất: kendo-ui - Kendo TreeView 选择功能和事件不当行为
Bài viết được đề xuất: kendo-ui - Kendo TreeView 上的最后一个节点
Bài viết được đề xuất: jQuery Tabs，如何防止 anchor 跳转
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com