jQuery和CSS - 移除/添加display:none

Question

我有一个带有以下类的div标签：

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

我想使用一些jQuery方法去除display:none;（使div显示），然后再次添加它（使div变成阴影）。

我该怎么做呢？

- markzzz

---

你是说当使用jQuery $(".news").show()时，这个div会形成阴影效果，是指它会淡出吗？请注意，我的任务是翻译，不包括解释或提供额外的信息。 - JCOC611

是的，$(".news").show() 可以工作！同样的 $(".news").hide() 也可以！！！谢谢 ;) - markzzz

你可以用 $('.news').toggle(); 将其压缩为一条语句。 - Eli Gundry

可能是如何使用JQuery更改css display none或block属性？的重复。 - Heretic Monkey

Answer 1

隐藏 div。

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

或者

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

并显示 div：

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

或者

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

- Snehal Ghumade

---

$('.news').css('display','block'); 对我有效！谢谢Shehal！ - Jitesh Sojitra

我如何将“显示”样式重置为最初在CSS中设置的样式而不是“块级元素”？ - ed22

这些是别名吗？ - theonlygusti

Answer 2

jQuery 提供:

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

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

- JCOC611

---

问题在于，.show() 方法不能移除 display: none 样式，而是根据元素的类型将其改为 display: block 或 inline 样式。如果该元素使用了不寻常的 display 样式，这可能会破坏布局。 - lolesque

@lolesque，我找到了一个简单的“hack”来解决这个问题。只需在您的CSS中使用element{display:none;}，但在您的JS中同时使用element.hide()。这将允许show()函数正常工作。 - Jarrod

Answer 3

在JavaScript中：

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

在jQuery中：

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

- Sergio

---

我不得不使用$("#id").css('display', '');来正确地移除“display”的内联样式。 - TrippinBilly

我也是 @TrippinBill（使用 Mac Firefox 43）- 已经提交了编辑。这些似乎是唯一的方法来删除CSS属性而不是反转它。这使得它可以被更广泛的CSS分配所覆盖，而反转则不行。 - Chris

Answer 4

好的，让我给您提供示例代码：

<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允许您仅使用一个效果来执行两个操作。所以很酷。

- Eli Gundry

---

展示 toggle 函数是个好主意。很多时候，如果你需要点击某些东西并显示它，你也希望有隐藏它的功能。 - user3267755

Answer 5

使用 toggle 来显示和隐藏。

$('#mydiv').toggle()

请查看工作示例，网址为http://jsfiddle.net/jNqTa/

- Hussein

---

请注意，自jQuery 1.9以来，.toggle()已被弃用。 - TylerH

@TylerH 我看不到任何被弃用的提示？ - Paul

@Paul 抱歉，我想的是切换事件 http://api.jquery.com/toggle-event/ - TylerH

Answer 6

使用jQuery的css-api取消内联"display:none"唯一的方法是使用空字符串重置它（顺便提一句，null 不起作用!!）。

根据jQuery文档，这是“删除”先前设置的内联样式属性的通用方式。

以下语法可以正确执行该操作: $("#mydiv").css("display","");

或者 $("#mydiv").css({display:""});

我的看法是，jQuery缺少一个称为“unhide”或“reveal”的方法，该方法不仅会设置另一个内联样式属性，而且会正确取消显示值。或者，hide()应该存储初始内联值，而show()则应恢复该值...

- shoesel

Answer 7

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

.hide { display:none; }

接着使用jQuery的.toggleClass()方法来显示/隐藏元素：

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

- rubiii

Answer 8

您并没有提供太多信息，但一般来说，这可能是一个解决方案：

$("div.news").css("display", "block");

- Yorian

---

你还需要哪些信息？我认为这是一个简单的问题，不是吗？无论如何，我使用 $(".news").show() 和 $(".news").hide() 解决了它 ;) - markzzz

一个显而易见的问题是：页面上是否有更多的div.news。如果是这种情况，它将显示所有的div.news。 - Yorian

Answer 9

jQuery的.show()和.hide()函数可能是您最好的选择。

- Dave Child

Answer 10

由于某些原因，切换对我不起作用，并且在浏览器检查元素时收到错误uncaught type error toggle is not a function。因此，我使用了以下代码，然后它开始对我起作用。

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

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

- SRI