jQuery 和 CSS - 删除/添加显示：无
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5059596/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery & CSS - Remove/Add display:none
提问by markzzz
I have a div with this class :
我有一个与这个类的 div：
.news{
width:710px;
float:left;
border-bottom:1px #000000 solid;
font-weight:bold;
display:none;
}
And I'd like with some jQuery methods remove that display:none; (so the div will showed) and than add it again (so the div will shadow).
我想用一些 jQuery 方法删除该 display:none; （所以 div 会显示）然后再添加它（所以 div 会阴影）。
How can I do it? Cheers
我该怎么做？干杯
回答by Snehal Ghumade
To hide the div
隐藏 div
$('.news').hide();
or
或者
$('.news').css('display','none');
and to show the div:
并显示div：
$('.news').show();
or
或者
$('.news').css('display','block');
回答by JCOC611
jQuery provides you with:
jQuery 为您提供：
$(".news").hide();
$(".news").show();
You can then easily show and hide the element(s).
然后，您可以轻松地显示和隐藏元素。
回答by Sergio
In JavaScript:
在 JavaScript 中：
getElementById("id").style.display = null;
In jQuery:
在 jQuery 中：
$("#id").css("display","");
回答by Eli Gundry
So, let me give you sample code:
所以，让我给你示例代码：
<div class="news">
Blah, blah, blah. I'm hidden.
</div>
<a class="trigger">Hide/Show News</a>
The link will be the trigger to show the div when clicked. So your Javascript will be:
该链接将成为点击时显示 div 的触发器。所以你的 Javascript 将是：
$('.trigger').click(function() {
$('.news').toggle();
});
You're almost always better off letting jQuery handle the styling for hiding and showing elements.
让 jQuery 处理隐藏和显示元素的样式几乎总是更好。
Edit:I see people above are recommending using .showand .hidefor this. .toggleallows you to do both with just one effect. So that's cool.
编辑：我看到上面的人建议使用.show和.hide为此。.toggle允许您同时使用一种效果。所以这很酷。
回答by Hussein
Use toggle to show and hide.
使用切换来显示和隐藏。
$('#mydiv').toggle()
Check working example at http://jsfiddle.net/jNqTa/
在http://jsfiddle.net/jNqTa/检查工作示例
回答by rubiii
i'd suggest adding a class to display/hide elements:
我建议添加一个类来显示/隐藏元素：
.hide { display:none; }
and then use jquery's .toggleClass()to show/hide the element:
然后使用 jquery 的.toggleClass()来显示/隐藏元素：
$(".news").toggleClass("hide");
回答by shoesel
The only way to remove an inline "display:none" via jQuery's css-api is by resetting it with the empty string (nulldoes NOT work btw!!).
通过 jQuery 的 css-api 删除内联“display:none”的唯一方法是用空字符串重置它（null顺便说一句，不起作用！！）。
According to the jQuery docu this is the general way to "remove" a once set inline style property.
根据 jQuery 文档，这是“删除”曾经设置的内联样式属性的一般方法。
$("#mydiv").css("display","");
$("#mydiv").css("display","");
or
或者
$("#mydiv").css({display:""});
$("#mydiv").css({display:""});
should do the trick properly.
应该正确地做到这一点。
IMHO there is a method missing in jQuery that could be called "unhide" or "reveal" which instead of just setting another inline style property unsets the display value properly as described above. Or maybe hide()should store the initial inline value and show()should restore that...
恕我直言，jQuery 中缺少一种可以称为“取消隐藏”或“显示”的方法，它不仅仅是设置另一个内联样式属性，而是如上所述正确地取消设置显示值。或者也许hide()应该存储初始内联值并show()应该恢复它......
回答by Dave Child
jQuery's .show() and .hide() functions are probably your best bet.
jQuery 的 .show() 和 .hide() 函数可能是你最好的选择。
回答by Yorian
You're not giving us much information but in general this might be a solution:
您没有给我们太多信息，但总的来说，这可能是一个解决方案：
$("div.news").css("display", "block");
回答by SRI
For some reason, toggle didn't work me and received error:"uncaught typeerror toggle is not a function".on inspect element in browser. So i used the following code and it started working for me.
出于某种原因，切换对我不起作用并收到错误：“未捕获的类型错误切换不是功能”。在浏览器中的检查元素上。所以我使用了以下代码，它开始为我工作。
$(".trigger").click(function () {
$('.news').attr('style', 'display:none');
}
$(".trigger").click(function () {
$('.news').attr('style', 'display:none');
}
Used jquery script file with version: 'jquery-2.1.3.min.js".
使用版本为“jquery-2.1.3.min.js”的 jquery 脚本文件。
