假设我创建了一个这样的HTML元素，
<div id="my-div" class="hidden">Hello, TB3</div>
<div id="my-div" class="hide">Hello, TB4</div>
<div id="my-div" class="d-none">Hello, TB4</div>
如何从jQuery/Javascript显示和隐藏HTML元素。
JavaScript:
$(function(){
$("#my-div").show();
});
结果:(与任何这些)。
我希望上面的元素被隐藏。
什么是最简单的方法隐藏元素使用Bootstrap和显示它使用jQuery?
当前回答
此解决方案不建议使用。使用投票最多的解决方案。
hide类对于在页面加载时隐藏内容非常有用。
我的解决方案是在初始化期间，切换到jquery的隐藏:
$('.targets').hide().removeClass('hide');
然后show()和hide()应该正常工作。
其他回答
我喜欢使用toggleClass:
var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);
此解决方案不建议使用。使用投票最多的解决方案。
hide类对于在页面加载时隐藏内容非常有用。
我的解决方案是在初始化期间，切换到jquery的隐藏:
$('.targets').hide().removeClass('hide');
然后show()和hide()应该正常工作。
有一个没有JQuery的解决方案
您可以使用CSS伪类:Active在单击时隐藏元素。这个伪类主要用于锚标记和按钮。
举个例子。
A:活动{显示:无;} /*活动链接*/ <a href="#">当它被点击时将会消失
带有按钮的示例
#btn-01:active ~ p { 显示:没有; ｝ <button id="btn-01"> click me</button> <p id="text">
HTML:
<div id="my-div" class="hide">Hello, TB3</div>
Javascript:
$(function(){
//If the HIDE class exists then remove it, But first hide DIV
if ( $("#my-div").hasClass( 'hide' ) ) $("#my-div").hide().removeClass('hide');
//Now, you can use any of these functions to display
$("#my-div").show();
//$("#my-div").fadeIn();
//$("#my-div").toggle();
});
更新:从现在开始，我使用.collapse和$('.collapse').show()。
对于Bootstrap 4 Alpha 6
对于Bootstrap 4，你必须使用.hidden-x -up。
https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes
.hidden-*-up类在视口位于给定断点或更宽位置时隐藏元素。例如，.hidden- mup隐藏中型、大型和超大视口上的元素。
还有隐藏的HTML5属性。
https://v4-alpha.getbootstrap.com/content/reboot/#html5-hidden-attribute
HTML5添加了一个名为[hidden]的新全局属性，默认情况下样式为display: none。借用PureCSS的思想，我们改进了这个默认值，使[hidden] {display: none !}来帮助防止它的显示被意外覆盖。虽然IE10本身不支持[hidden]，但CSS中的显式声明解决了这个问题。 <input type="text" hidden>
还有。invisible会影响布局。
https://v4-alpha.getbootstrap.com/utilities/invisible-content/
invisible类只能用来切换元素的可见性，这意味着它的显示不会被修改，元素仍然可以影响文档的流程。
