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');

如果有很多元素需要 .hide()或者 .show()，那么即使使用 .hide(0)或者 .show(0)，也会浪费很多资源，0参数就是动画的持续时间。

与 原型机 .hide()和 .show()方法相比，原型机 .hide()和 .show()方法只用于操作元素的显示属性，而 JQuery的实现更为复杂，不推荐用于大量元素。

在这种情况下，您可能应该尝试 .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”或“ show”的方法，它不仅仅是设置另一个内联样式属性，而是像上面描述的那样正确地取消显示值。或者 hide()应该存储初始内联值，而 show()应该恢复..。

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

.news-show {
display:inline-block;
}


.news-hide {
display:none;
}

用您选择的首选显示方法替换 inline-block，并使用 jquerys addclass https://api.jquery.com/addclass/和 Removecclass 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: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>

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

下面是一些使用 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();


}




});