切换显示：无JavaScript风格 [英] Toggle display:none style with JavaScript

问题描述

当用户点击显示所有标签链接时，我想更改样式（下面的第二行）以删除 display：none; 如果用户再次点击显示所有标签链接，我需要将 display：none; 文本添加回style ...语句。

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.

<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 文本。

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: none text.

推荐答案

提供 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：

IF you're using jQuery, this becomes:

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

最后，你特意说你想操作这个css属性，而不是简单地显示或隐藏底层元素。不过我会用jQuery来提及它。

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

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

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

will alternate between showing or hiding this element.

这篇关于切换显示：无JavaScript风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！