使用 JavaScript 切换显示：无样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8454079/
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
Toggle display:none style with JavaScript
提问by Josh Bond
I want to change the style (second line below) to remove the display: none;part when the user clicks on the "Show All Tags" link. If the user clicks the "Show All Tags" link again, I need the display: none;text added back in to the "style..." statement.
display: none;当用户单击“显示所有标签”链接时，我想更改样式（下面的第二行）以删除该部分。如果用户再次单击“显示所有标签”链接，我需要将display: none;文本重新添加到“样式...”语句中。
<a href="#" title="Show Tags">Show All Tags</a>
<ul class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">
I've searched here and Google for an example I can apply to my situation. I've found plenty of examples using 2 DIV blocks to show/hide. I really need to do it this way, by modifying the html style element. Does anyone have an example (or provide a link to an example) that does this type of toggle wtih the display: nonetext.
我在这里和谷歌搜索了一个可以应用于我的情况的例子。我发现了很多使用 2 个 DIV 块来显示/隐藏的示例。我真的需要这样做，通过修改 html 样式元素。有没有人有一个例子（或提供一个例子的链接）用display: none文本进行这种类型的切换。
回答by Adam Rackis
Give your ulan id,
给你ul一个id，
<ul id='yourUlId' class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">
then do
然后做
var yourUl = document.getElementById("yourUlId");
yourUl.style.display = yourUl.style.display === 'none' ? '' : 'none';
IFyou're using jQuery, this becomes:
如果你使用 jQuery，这将变成：
var $yourUl = $("#yourUlId");
$yourUl.css("display", $yourUl.css("display") === 'none' ? '' : 'none');
Finally, you specifically said that you wanted to manipulate this css property, and not simply show or hide the underlying element. Nonetheless I'll mention that with jQuery
最后，您明确表示要操作此 css 属性，而不是简单地显示或隐藏底层元素。尽管如此，我还是会提到 jQuery
$("#yourUlId").toggle();
will alternate between showing or hiding this element.
将在显示或隐藏此元素之间交替。
回答by marcocamejo
Give the UL an ID and use the getElementById function:
给 UL 一个 ID 并使用 getElementById 函数：
<html>
<body>
<script>
function toggledisplay(elementID)
{
(function(style) {
style.display = style.display === 'none' ? '' : 'none';
})(document.getElementById(elementID).style);
}
</script>
<a href="#" title="Show Tags" onClick="toggledisplay('changethis');">Show All Tags</a>
<ul class="subforums" id="changethis" style="overflow-x: visible; overflow-y: visible; ">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
回答by ThinkingStiff
Others have answered your question perfectly, but I just thought I would throw out another way. It's always a good idea to separate HTML markup, CSS styling, and javascript code when possible. The cleanest way to hide something, with that in mind, is using a class. It allows the definition of "hide" to be defined in the CSS where it belongs. Using this method, you could later decide you want the ulto hide by scrolling up or fading away using CSS transition, all without changing your HTML or code. This is longer, but I feel it's a better overall solution.
其他人已经完美地回答了你的问题，但我只是想我会用另一种方式抛出。尽可能将 HTML 标记、CSS 样式和 javascript 代码分开总是一个好主意。考虑到这一点，隐藏某些东西的最干净的方法是使用类。它允许在它所属的 CSS 中定义“隐藏”的定义。使用此方法，您可以稍后决定要ul通过使用 CSS 向上滚动或淡出来隐藏transition，而无需更改您的 HTML 或代码。这是更长的时间，但我觉得这是一个更好的整体解决方案。
Demo: http://jsfiddle.net/ThinkingStiff/RkQCF/
演示：http: //jsfiddle.net/ThinkingStiff/RkQCF/
HTML:
HTML：
<a id="showTags" href="#" title="Show Tags">Show All Tags</a>
<ul id="subforms" class="subforums hide"><li>one</li><li>two</li><li>three</li></ul>
CSS:
CSS：
#subforms {
overflow-x: visible;
overflow-y: visible;
}
.hide {
display: none;
}
Script:
脚本：
document.getElementById( 'showTags' ).addEventListener( 'click', function () {
document.getElementById( 'subforms' ).toggleClass( 'hide' );
}, false );
Element.prototype.toggleClass = function ( className ) {
if( this.className.split( ' ' ).indexOf( className ) == -1 ) {
this.className = ( this.className + ' ' + className ).trim();
} else {
this.className = this.className.replace( new RegExp( '(\s|^)' + className + '(\s|$)' ), ' ' ).trim();
};
};
回答by agarcian
You can do this through straight javascript and DOM, but I really recommend learning JQuery. Here is a function you can use to actually toggle that object.
您可以通过直接使用 javascript 和 DOM 来做到这一点，但我真的建议您学习 JQuery。这是一个可用于实际切换该对象的函数。
EDIT: Adding the actual code:
编辑：添加实际代码：
Solution:
解决方案：
HTML snippet:
HTML 片段：
<a href="#" id="showAll" title="Show Tags">Show All Tags</a>
<ul id="tags" class="subforums" style="display:none;overflow-x: visible; overflow-y: visible; ">
<li>Tag 1</li>
<li>Tag 2</li>
<li>Tag 3</li>
<li>Tag 4</li>
<li>Tag 5</li>
</ul>
Javascript code using JQuery from Google's Content Distribution Network: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
使用来自 Google 内容分发网络的 JQuery 的 Javascript 代码：https: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
$(function() {
$('#showAll').click(function(){ //Adds click event listener
$('#tags').toggle('slow'); // Toggles visibility. Use the 'slow' parameter to add a nice effect.
});
});
You can test directly from this link: http://jsfiddle.net/vssJr/5/
您可以直接从此链接进行测试：http: //jsfiddle.net/vssJr/5/
Additional Comments on JQuery:
对 JQuery 的补充评论：
Someone has suggested that using JQuery for something like this is wrong because it is a 50k Library. I have a strong opinion against that.
有人建议将 JQuery 用于这样的事情是错误的，因为它是一个 50k 库。我对此持强烈反对意见。
JQuery is widely used because of the huge advantages it offers (like many other javascript frameworks). Additionally, JQuery is hosted by Content Distribution Networks (CDNs) like Google's CDNthat will guarantee that the library is cached in the client's browser. It will have minimal impact on the client.
JQuery 被广泛使用，因为它提供了巨大的优势（就像许多其他 javascript 框架一样）。此外，JQuery 由内容分发网络 (CDN) 托管，例如Google 的 CDN，这将保证库缓存在客户端的浏览器中。它对客户端的影响很小。
Additionally, with JQuery you can use powerful selectors, adding event listener, and use functions that are for the most part guaranteed to be cross-browser.
此外，通过 JQuery，您可以使用强大的选择器、添加事件侦听器，并使用大部分保证跨浏览器的函数。
If you are a beginner and want to learn Javascript, please don't discount frameworks like JQuery. It will make your life so much easier.
如果你是初学者，想学习Javascript，请不要小看JQuery这样的框架。它会让你的生活变得更轻松。
回答by kalpesh
you can do this easily by using jquery using .css property... try this one: http://api.jquery.com/css/
您可以通过使用 .css 属性使用 jquery 轻松完成此操作...试试这个：http: //api.jquery.com/css/
