jQuery&CSS – 删除/添加显示:无
我有这个类的div:
.news{ width:710px; float:left; border-bottom:1px #000000 solid; font-weight:bold; display:none; }
我想用一些jQuery方法删除显示:无; (所以div会显示),而不是再次添加(所以div会影响)。
我该怎么做? 干杯
要隐藏div
$('.news').hide();
要么
$('.news').css('display','none');
并显示div
:
$('.news').show();
要么
$('.news').css('display','block');
jQuery为您提供:
$(".news").hide(); $(".news").show();
然后,您可以轻松显示和隐藏元素。
所以,让我给你示例代码:
<div class="news"> Blah, blah, blah. I'm hidden. </div> <a class="trigger">Hide/Show News</a>
点击链接将是触发器显示div。 所以你的Javascript将是:
$('.trigger').click(function() { $('.news').toggle(); });
你几乎总是让jQuery处理隐藏和显示元素的样式。
编辑:我看到上面的人推荐使用.show
和.show
这个。 .toggle
让你只用一个效果就可以做到这一点。 所以这很酷。
在JavaScript中:
getElementById("id").style.display = null;
在jQuery中:
$("#id").css("display","");
jQuery的.show()和.hide()函数可能是你最好的select。
我build议添加一个类来显示/隐藏元素:
.hide { display:none; }
然后使用jquery的.toggleClass()来显示/隐藏元素:
$(".news").toggleClass("hide");
你没有给我们太多的信息,但总的来说这可能是一个解决scheme:
$("div.news").css("display", "block");
通过jQuery的css-api删除内联“display:none”的唯一方法是用空string( null
不工作btw !!)重置它。
根据jQuery文档,这是“删除”一次内联样式属性的一般方法。
$("#mydiv").css("display","");
要么
$("#mydiv").css({display:""});
应该正确地做这个把戏。
恕我直言,在jQuery中有一个方法可以被称为“取消隐藏”或“显示”,而不是像上面所描述的那样只是设置另一个内联样式属性来正确设置显示值。 或者也许hide()
应该存储最初的内联值, show()
应该还原那个…
出于某种原因,切换不起作用,并收到错误: “uncaught typeerror切换不是一个函数”。 浏览器中的检查元素。 所以我用下面的代码,它开始为我工作。
$(".trigger").click(function () { $('.news').attr('style', 'display:none'); }
使用版本为“jquery-2.1.3.min.js”的jquery脚本文件。
如果你有很多元素你想要.show()
.hide()
或.show()
,你将会浪费大量的资源来做你想做的事 – 即使使用.show(0)
或.show(0)
– 0参数是animation的持续时间。
与仅用于操作元素的display属性的Prototype.js .show()
.hide()
和.show()
方法相反, jQuery的实现比较复杂,不推荐用于大量的元素。
在这种情况下,您应该尝试使用.css('display','none')
来隐藏和.css('display','')
来显示
应该避免使用.css('display','block')
,特别是当你使用内联元素,表行(实际上是任何表元素)时
考虑到lolesque的评论,以最好的答案,你可以添加一个属性或类来显示/隐藏元素的显示属性不同于它通常有,如果您的网站需要向后兼容我build议做一个类,并添加/删除它显示/显示元素
.news-show { display:inline-block; } .news-hide { display:none; }
用您select的首选显示方法replace内联块,并使用jquerys addclass https://api.jquery.com/addclass/和removeclass https://api.jquery.com/removeclass/,而不是显示/隐藏,如果向后兼容性是没有问题的,你可以使用像这样的属性。;
.news[data-news-visible=show] { display:inline-block; } .news[data-news-visible=hide] { display:none; }
并使用jquerys attr() http://api.jquery.com/attr/来显示和隐藏元素。;
无论您喜欢哪种方法,都可以在以这种方式显示/隐藏元素时轻松实现css3animation