使用 JavaScript 切换显示：无样式

Question

当用户单击“显示所有标签”链接时，我想更改样式（下面的第二行）以删除 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; ">

我在这里和谷歌搜索了一个可以应用于我的情况的例子。我发现了很多使用 2 个 DIV 块来显示/隐藏的示例。我真的需要这样做，通过修改 html 样式元素。有没有人有一个例子（或提供一个例子的链接）用 display: none 文本进行这种类型的切换。

原文由 Josh Bond 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

给你的 ul 一个 id ，

 <ul id='yourUlId' class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">

然后做

var yourUl = document.getElementById("yourUlId");
yourUl.style.display = yourUl.style.display === 'none' ? '' : 'none';

如果 您使用的是 jQuery，这将变为：

 var $yourUl = $("#yourUlId");
$yourUl.css("display", $yourUl.css("display") === 'none' ? '' : 'none');

最后，您明确表示您想操纵这个 css 属性，而不是简单地显示或隐藏底层元素。尽管如此，我还是会提到 jQuery

 $("#yourUlId").toggle();

将交替显示或隐藏此元素。

原文由 Adam Rackis 发布，翻译遵循 CC BY-SA 3.0 许可协议