jQuery & CSS - 移除/添加显示：无

Posted 2023-03-06

技术标签:

【中文标题】jQuery & CSS - 移除/添加显示：无【英文标题】：jQuery & CSS - Remove/Add display:none 【发布时间】：2011-06-30 21:12:27 【问题描述】：

我有这个类的 div：

.news
  width:710px; 
  float:left;
  border-bottom:1px #000000 solid;
  font-weight:bold;
  display:none;

我想用一些 jQuery 方法删除 display:none; （所以 div 会显示），然后再次添加它（所以 div 会阴影）。

我该怎么做？干杯

【问题讨论】：

jQuery $(".news").show()? “所以 div 会阴影”......你的意思是它会淡出？？是的$(".news").show() 工作！一样的$(".news").hide()！！！谢谢;) 您可以使用$('.news').toggle();将其浓缩为一个语句 How to change css display none or block property using Jquery?的可能重复 【参考方案1】：

由于某种原因，toggle 对我不起作用，我在浏览器中检查元素时收到错误 uncaught type error toggle is not a function。所以我使用了以下代码，它开始为我工作。

$(".trigger").click(function () 
    $('.news').attr('style', 'display:none');
)

使用 jquery 脚本文件jquery-2.1.3.min.js.

【讨论】：

【参考方案2】：

使用show() 会添加display:block 代替display:hide，这可能会破坏事情。

为避免这种情况，您可以创建一个具有属性display:none 的类，并使用toggleClass() 为该元素切换该类。

$("button").on('click', function(event)  $("div").toggleClass("hide"); );

.hide
   display:none;


div
   width:40px;
   height:40px;
   background:#000;
   margin-bottom:20px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<button>Toggle Box</button>

没有一个答案提到这个。

【讨论】：

【参考方案3】：

在 javascript 中：

getElementById("id").style.display = null;

在 jQuery 中：

$("#id").css("display","");

【讨论】：

我不得不使用 $("#id").css('display', '');使其在删除“显示”的内联样式时正常工作我也是@TrippinBill（使用 Mac Firefox 43）- 已提交编辑。这些似乎是删除 CSS 属性而不是反转它的唯一方法。这允许它被更广泛的 CSS 分配覆盖，而反转它不会。【参考方案4】：

如果你有很多想要.hide() 或.show() 的元素，你将浪费大量资源来做你想做的事——即使使用.hide(0) 或.show(0)——0参数是动画的持续时间。

相对于Prototype.js .hide() 和 .show() 方法仅用于操作元素的显示属性，jQuery 的实现更加复杂并且不推荐用于大量元素。

在这种情况下，您可能应该尝试 .css('display','none') 隐藏和 .css('display','') 显示

应避免使用.css('display','block')，尤其是当您使用内联元素、表格行（实际上是任何表格元素）等时。

【讨论】：

【参考方案5】：

考虑到 lolesque 对最佳答案的评论，您可以添加一个属性或一个类来显示/隐藏具有与通常不同的显示属性的元素，如果您的网站需要向后兼容性，我建议您创建一个类并添加/删除它显示/显示元素

.news-show 
display:inline-block;


.news-hide 
display:none;

用您选择的首选显示方法替换 inline-block 并使用 jquerys addclass https://api.jquery.com/addclass/ 和 removeclass https://api.jquery.com/removeclass/ 而不是显示/隐藏，如果向后兼容性没有问题，您可以使用这样的属性。

.news[data-news-visible=show] 
display:inline-block;


.news[data-news-visible=hide] 
display:none;

并使用 jquerys attr() http://api.jquery.com/attr/ 显示和隐藏元素。

无论您喜欢哪种方法，都可以在以这种方式显示/隐藏元素时轻松实现 css3 动画

【讨论】：

【参考方案6】：

通过 jQuery 的 css-api 删除内联 "display:none" 的唯一方法是用空字符串重置它（null 顺便说一句不起作用！！）。

根据 jQuery 文档，这是“删除”曾经设置的内联样式属性的一般方法。

$("#mydiv").css("display","");

或

$("#mydiv").css(display:"");

应该正确地做到这一点。

恕我直言，jQuery 中缺少一个可以称为“取消隐藏”或“显示”的方法，它不是仅仅设置另一个内联样式属性，而是如上所述正确地取消设置显示值。或者hide() 应该存储初始内联值，show() 应该恢复它...

【讨论】：

【参考方案7】：

隐藏div

$('.news').hide();

或

$('.news').css('display','none');

并显示div：

$('.news').show();

或

$('.news').css('display','block');

【讨论】：

$('.news').css('display','block');为我工作！谢谢谢哈尔！如何将“显示”样式重置为最初在 CSS 中设置的样式，而不是“阻止”？这些是别名吗？【参考方案8】：

那么，让我给你示例代码：

<div class="news">
Blah, blah, blah. I'm hidden.
</div>

<a class="trigger">Hide/Show News</a>

该链接将成为点击时显示 div 的触发器。所以你的 Javascript 将是：

$('.trigger').click(function() 
   $('.news').toggle();
);

让 jQuery 处理隐藏和显示元素的样式几乎总是更好。

编辑：我看到上面的人推荐使用 .show 和 .hide 来做这个。 .toggle 允许您同时使用一种效果。所以这很酷。

【讨论】：

显示toggle 函数的好主意。很多时候，如果您需要单击某些内容并显示它，您也希望该功能也能隐藏它。【参考方案9】：

使用切换来显示和隐藏。

$('#mydiv').toggle()

在http://jsfiddle.net/jNqTa/查看工作示例

【讨论】：

请注意，.toggle() 自 jQuery 1.9 起已弃用。 @TylerH 我看不到说明它已被弃用？ @Paul 抱歉，我在考虑切换事件api.jquery.com/toggle-event【参考方案10】：

jQuery 为您提供：

$(".news").hide();
$(".news").show();

然后您可以轻松地显示和隐藏元素。

【讨论】：

问题是，.show()并没有删除display: none，而是根据元素放置display: block或inline，如果元素使用不寻常的@，它可能会破坏布局987654326@风格。 @lolesque 我找到了一个简单的“hack”来解决这个问题。只需在您的 css 中使用 elementdisplay:none;，但在您的 js 中，也同时使用 element.hide()。这将允许show() 函数工作。【参考方案11】：

我建议添加一个类来显示/隐藏元素：