Jos*_*ond 35 html javascript css
我想更改样式(下面的第二行),以便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文本进行这种类型的切换.
Ada*_*kis 85
给你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();
将在显示或隐藏此元素之间切换.
mar*_*ejo 11
为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>
其他人已经完美地回答了你的问题,但我只是想我会抛弃另一种方式.在可能的情况下分离HTML标记,CSS样式和javascript代码总是一个好主意.考虑到这一点,隐藏某些东西最干净的方法是使用一个类.它允许在它所属的CSS中定义"hide"的定义.使用此方法,您可以稍后ul通过使用CSS向上滚动或淡出来决定要隐藏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();
};
};