Question

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

<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文本进行此类切换的示例（或提供示例链接）。

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';

IF 你正在使用jQuery，这就变成了：

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

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

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

将在显示或隐藏此元素之间切换。

Answer 2

为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>

Answer 3

其他人完全回答了你的问题，但我只是想我会抛弃另一种方式。在可能的情况下分离HTML标记，CSS样式和javascript代码总是一个好主意。考虑到这一点，隐藏某些东西最干净的方法是使用一个类。它允许在它所属的CSS中定义“hide”的定义。使用此方法，您可以稍后通过使用CSS ul向上滚动或淡出来隐藏transition，而无需更改HTML或代码。这个时间更长，但我觉得这是一个更好的整体解决方案。

演示：http://jsfiddle.net/ThinkingStiff/RkQCF/

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：

#subforms {
    overflow-x: visible; 
    overflow-y: visible;
}

.hide {
    display: none; 
}

脚本：

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();
    };
};

Answer 4

切换隐藏元素 ID 结束类名...

function toggleElem(newElem) {
    var elem = document.getElementById('' + newElem + '');
    var eIdent = (elem != null) ? ('#' + newElem) : ('.' + newElem);
    elem = document.querySelector('' + eIdent + '');
    elem.style.display = (elem.style.display != 'none') ? 'none' : 'block';
}

您可以直接从此链接进行测试：https://codepen.io/pedro404/pen/VwmPBee

Answer 5

你可以通过直接的javascript和DOM来做到这一点，但我真的建议学习JQuery。这是一个可以用来实际切换该对象的函数。

http://api.jquery.com/toggle/

编辑：添加实际代码：

<强>解决方案：

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>

使用来自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.
    });
});

您可以直接通过以下链接进行测试：http://jsfiddle.net/vssJr/5/

关于JQuery的其他评论：

有人建议使用JQuery这样的东西是错误的，因为它是一个50k的库。我对此持强烈反对意见。

JQuery因其提供的巨大优势而被广泛使用（与许多其他javascript框架一样）。此外，JQuery由内容分发网络（CDN）托管，如Google's CDN，它将保证库缓存在客户端的浏览器中。它对客户的影响很小。

此外，使用JQuery，您可以使用强大的选择器，添加事件侦听器，并使用大部分保证跨浏览器的功能。

如果您是初学者并想学习Javascript，请不要打折像JQuery这样的框架。它会让你的生活变得更加轻松。

Answer 6

使用.css属性使用jquery可以轻松完成此操作... 试试这个：http://api.jquery.com/css/

切换显示：无JavaScript样式

6 个答案: