jQuery和CSS-删除/添加显示：无

我这个班有一个div：

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

我想用一些jQuery方法删除该display：none; （这样div就会显示），然后再添加一次（这样div就会阴影）。

我该怎么做？干杯

隐藏 div

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

要么

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

并显示div：

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

要么

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

jQuery为您提供：

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

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

所以，让我给您示例代码：

<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让您仅用一种效果就可以做到。太酷了。

在JavaScript中：

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

在jQuery中：

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

使用切换按钮显示和隐藏。

$('#mydiv').toggle()

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

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

.hide { display:none; }

然后使用jquery的.toggleClass（）显示/隐藏元素：

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

通过jQuery的css-api删除内联“ display：none”的唯一方法是使用空字符串将其重置（null顺便说一句！）。

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

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

要么

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

应该正确地做到这一点。

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

jQuery的.show（）和.hide（）函数可能是最好的选择。

您没有给我们太多信息，但是总的来说这可能是一个解决方案：

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

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

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

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

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

与Prototype.js .hide()和.show()仅用于操纵元素的display属性的方法相反，jQuery的实现更为复杂，不建议将其用于大量元素。

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

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

考虑到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/，而不是show / hide（如果向后）兼容性没有问题，您可以使用这样的属性。

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

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

并使用jatts attr（）http://api.jquery.com/attr/来显示和隐藏元素。

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

使用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>

没有答案提到这一点。