如何隐藏元素使用Twitter引导和显示它使用jQuery?

假设我创建了一个这样的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?

当前回答

正确答案

引导4.倍

引导4。X使用新的.d-none类。而不是使用。hidden，或。hide如果你使用Bootstrap 4。X使用.d-none。

<div id="myId" class="d-none">Foobar</div>

要显示它:$("#myId").removeClass('d-none'); 隐藏它:$("#myId").addClass('d-none'); 要切换它:$("#myId").toggleClass('d-none');

(感谢方明的评论)

引导3.倍

首先，不要使用。hide!使用.hidden。正如其他人所说，.hide是不可取的，

.hide是可用的，但它并不总是影响屏幕阅读器，并且从v3.0.1开始已弃用

其次，使用jQuery的.toggleClass()， .addClass()和.removeClass()

<div id="myId" class="hidden">Foobar</div>

要显示它:$("#myId").removeClass('hidden'); 隐藏它:$("#myId").addClass('hidden'); 要切换它:$("#myId").toggleClass('hidden');

不要使用css类.show，它的用例非常小。show, hidden和invisible的定义在文档中。

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

2015-02-03 08:18:19

其他回答

简单:

$(function(){
  $("#my-div").removeClass('hide');
});

或者如果你想让这个类仍然在那里:

$(function(){
  $("#my-div").css('display', 'block !important');
});

2013-09-02 08:32:47

此解决方案不建议使用。使用投票最多的解决方案。

hide类对于在页面加载时隐藏内容非常有用。

我的解决方案是在初始化期间，切换到jquery的隐藏:

$('.targets').hide().removeClass('hide');

然后show()和hide()应该正常工作。

2013-12-11 21:01:02

我喜欢使用toggleClass:

var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);

2014-02-13 20:12:55