blocks|key|781189|text|要隐藏div，请执行以下操作|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|781190|$('.news').hide();|code-block|syntax|javascript|781191|或|781192|$('.news').css('display','none');|781193|并显示div|781194|$('.news').show();|781195|781196|$('.news').css('display','block');|781197|entityMap^0|3|3|0|0|0|0|3|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|S|3|L|5|6|7|17|8|@]|D|@]|E|$]]|$1|T|3|U|5|H|7|18|8|@]|D|@]|E|$I|J]]|$1|V|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|W|$]]

To hide the <code>div</code>

<pre><code>$('.news').hide();
</code></pre>

or

<pre><code>$('.news').css('display','none');
</code></pre>

and to show the <code>div</code>:

<pre><code>$('.news').show();
</code></pre>

or

<pre><code>$('.news').css('display','block');
</code></pre>

blocks|key|781139|text|jQuery为您提供：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|781140|$(".news").hide();
$(".news").show();|code-block|syntax|javascript|781141|然后，您可以轻松地显示和隐藏元素。|781142|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

jQuery provides you with:

<pre><code>$(".news").hide();
$(".news").show();
</code></pre>

You can then easily show and hide the element(s).

blocks|key|781204|text|在JavaScript中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|781205|getElementById("id").style.display+=+null;|code-block|syntax|javascript|781206|在jQuery中：|781207|$("#id").css("display","");|781208|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

In JavaScript: 

<pre><code>getElementById("id").style.display = null;
</code></pre>

In jQuery:

<pre><code>$("#id").css("display","");
</code></pre>

blocks|key|781275|text|通过jQuery的css-api删除内联"display:none“的唯一方法是用空字符串重置它(顺便说一下，null不起作用！)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|781276|根据jQuery文档，这是“移除”一次设置的内联样式属性的一般方法。|781277|$("#mydiv").css("display","");|781278|或|781279|$("#mydiv").css({display:""});|781280|应该能正确地完成这项工作。|781281|我的意思是，在jQuery中缺少一个可以被称为“取消隐藏”或“显示”的方法，它不是仅仅设置另一个内联样式属性，而是如上所述正确地取消显示值。或者，也许hide()应该存储初始内联值，而show()应该恢复该值...|781282|entityMap^0|1J|4|0|0|0|U|0|0|0|U|0|0|23|6|2K|6|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|10|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|14|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|S|$]]

The only way to remove an inline "display:none" via jQuery's css-api is by resetting it with the empty string (<code>null</code> does NOT work btw!!).

According to the jQuery docu this is the general way to "remove" a once set inline style property.

<code>$("#mydiv").css("display","");</code>

or

<code>$("#mydiv").css({display:""});</code>

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 <code>hide()</code> should store the initial inline value and <code>show()</code> should restore that...

blocks|key|781095|text|我建议添加一个类来显示/隐藏元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|781096|.hide+{+display:none;+}|code-block|syntax|javascript|781097|然后使用jquery的.toggleClass()来显示/隐藏元素：|offset|length|781098|$(".news").toggleClass("hide");|781099|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/toggleClass/^0|0|0|B|E|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

i'd suggest adding a class to display/hide elements:

<pre><code>.hide { display:none; }
</code></pre>

and then use jquery's <a href="http://api.jquery.com/toggleClass/" rel="noreferrer">.toggleClass()</a> to show/hide the element:

<pre><code>$(".news").toggleClass("hide");
</code></pre>

blocks|key|780992|text|您没有向我们提供太多信息，但通常这可能是一个解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|780993|$("div.news").css("display",+"block");|code-block|syntax|javascript|780994|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You're not giving us much information but in general this might be a solution:

<pre><code>$("div.news").css("display", "block");
</code></pre>

blocks|key|995389|text|jQuery的.show()和.hide()函数可能是最好的选择。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|995390|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

jQuery's .show() and .hide() functions are probably your best bet.

blocks|key|781574|text|由于某些原因，切换对我不起作用，当我在浏览器中检查元素时，我收到了错误uncaught+type+error+toggle+is+not+a+function。所以我使用了下面的代码，它开始为我工作了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|781575|$(".trigger").click(function+()+{
++++$('.news').attr('style',+'display:none');
})|code-block|syntax|javascript|781576|使用jquery脚本文件jquery-2.1.3.min.js。|781577|entityMap^0|Z|18|0|0|C|J|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

For some reason, toggle didn't work for me, and I received the error <code>uncaught type error toggle is not a function</code> when inspecting the element in browser. So I used the following code and it started working for me.
<pre><code>$(&quot;.trigger&quot;).click(function () {
 $('.news').attr('style', 'display:none');
})
</code></pre>
Used jquery script file <code>jquery-2.1.3.min.js</code>.

blocks|key|781362|text|考虑到lolesque对最佳答案的评论，您可以添加一个属性或一个类来显示/隐藏具有不同于通常所具有的显示属性的元素，如果您的站点需要向后兼容，我建议您创建一个类并添加/删除它来显示/显示元素|type|unstyled|depth|inlineStyleRanges|entityRanges|data|781363|.news-show+{
display:inline-block;
}

.news-hide+{
display:none;
}|code-block|syntax|javascript|781364|使用您选择的首选显示方法替换inline-block，并使用jquerys+addclass+https://api.jquery.com/addclass/和removeclass+https://api.jquery.com/removeclass/代替show/hide，如果向后兼容性没有问题，您可以使用如下属性。|offset|length|781365|.news[data-news-visible=show]+{
display:inline-block;
}

.news[data-news-visible=hide]+{
display:none;
}|781366|并使用jquery+attr()+http://api.jquery.com/attr/来显示和隐藏元素。|781367|无论您喜欢哪种方法，它都能使您在以这种方式显示/隐藏元素时轻松实现css3动画|781368|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/addclass/|1|https://api.jquery.com/removeclass/|2|http://api.jquery.com/attr/^0|0|0|1B|W|0|2K|Z|1|0|0|H|R|2|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@$I|15|J|16|1|17]|$I|18|J|19|1|1A]]|A|$]]|$1|K|3|L|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|1C|8|@]|9|@$I|1D|J|1E|1|1F]]|A|$]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]|10|$5|T|U|V|A|$W|11]]]]

Considering lolesque's comment to best answer you can add either an attribute or a class to show/hide elements with display properties that differs from what it normally has, if your site needs backwards compatibility I would suggest making a class and adding/removing it to show/display the element

<pre><code>.news-show {
display:inline-block;
}

.news-hide {
display:none;
}
</code></pre>

Replace inline-block with your preferred display method of your choice and use jquerys addclass <a href="https://api.jquery.com/addclass/" rel="nofollow">https://api.jquery.com/addclass/</a> and removeclass <a href="https://api.jquery.com/removeclass/" rel="nofollow">https://api.jquery.com/removeclass/</a> instead of show/hide, if backwards compatibility is no problem you can use attributes like this.

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

.news[data-news-visible=hide] {
display:none;
}
</code></pre>

And use jquerys attr() <a href="http://api.jquery.com/attr/" rel="nofollow">http://api.jquery.com/attr/</a> to show and hide the element.

Whichever method you prefer it makes you able to easily implement css3 animations when showing/hiding elements this way

I have a div with this class :

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

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).

How can I do it? Cheers

jQuery & CSS - Remove/Add display:none

jQuery

我在这个类中有一个div：.news{  width:710px;   float:left;  border-bottom:1px #000000 solid;  font-weight:bold;  display:none;}我想用一些jQuery方法删除显示:none；(这样div就会显示出来)，然后再添加一次(这样div就会出现阴影)。我该怎么做呢？干杯

问jQuery & CSS -删除/添加显示:无
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery & CSS -删除/添加显示:无EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery & CSS -删除/添加显示:无
EN