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

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

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

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

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

.hide { display:none; }

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

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

jQuery为您提供：

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

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

使用切换来显示和隐藏。

$('#mydiv').toggle()

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

所以，我给你一个示例代码：

<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

要隐藏div

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

或

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

并显示：div

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

或

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

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

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

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

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

在 JavaScript 中：

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

在jQuery中：

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

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

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

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

或

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

应该正确地做这个伎俩。

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

考虑到 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;
}

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

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

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

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

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

使用加法代替它可能会破坏事情。show()display:blockdisplay:hide

为了避免这种情况，您可以有一个带有属性的类，并使用 切换该元素的类。display:nonetoggleClass()

$("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>

没有一个答案提到这一点。

以下是使用 JS 显示和隐藏的几个不同示例：

http://jsfiddle.net/vsLkb8a7/8/

CSS：

<style>
.elem{
    width:300px;
    height:300px;   
}

.divClass1{
    background:red;
}
.divClass2{
    background:blue;
}
.divClass3{
    background:green;
}
.divClass4{
    background:orange;
}
.divClass5{
    background:black;
}
.divClass6{
    background:yellow;
}
.hidemeClass{
  display:none;
}

.showmeClass{
  display:block;
}
</style>

HTML格式：

<button class="myBtn">show and hide div</button>
<div id="" class="elem divClass1"></div>
<div id="" class="elem divClass2 showmeClass"></div>
<div id="divId" class="elem divClass3"></div>
<div id="" class="elem divClass4"></div>
<div id="" class="elem divClass5"></div>
<div id="" class="elem divClass6"></div>

jS：

jQuery(".myBtn").click(function () {

  //Simple toggle
  jQuery('.divClass1').toggle();
  

  //OR use a toggle between classes. Of course you would have to add: .hidemeClass{display:none;}.showmeClass{display:block;} to your stylesheet and the element should have atleast the default class.
  jQuery('.divClass2').toggleClass('hidemeClass showmeClass');



  //OR let's use a toggle with a case statement
  jQuery(this).toggleClass('hidediv');
  
  if (jQuery(this).hasClass('hidediv')){


    //using Plain Javascript
    const el= document.getElementById("divId");
    el.style = "display:none;"; //display:unset or :initial


    //or using Attr()
    jQuery('.divClass4').attr('style', 'display:none');
    //display:unset or :initial

    //or using css()
    jQuery('.divClass5').css('display','none');
    //display:unset or :initial


    //or using builtin hide()
    jQuery('.divClass6').hide();

  }else{

    //using Plain Javascript
    const el= document.getElementById("divId");
    el.style = "display:block;"; //display:unset or :initial

    //or using Attr()
    jQuery('.divClass4').attr('style', 'display:block'); 
    //display:unset or :initial

    //or using css()
    jQuery('.divClass5').css('display','block');
    //display:unset or :initial


    //or using builtin show()
    jQuery('.divClass6').show();

  }


});