假设我创建了一个这样的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?
当前回答
最近从2.3升级到3.1时遇到了这种情况;我们的jQuery动画(slideDown)崩溃了，因为我们在页面模板的元素上放置了隐藏。我们创建了以名字间隔的Bootstrap类版本，现在它带有丑陋的重要规则。
.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...
其他回答
此解决方案不建议使用。使用投票最多的解决方案。
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">
使用bootstrap .collapse而不是.hidden
稍后在JQuery中，您可以使用.show()或.hide()来操作它
$(function(){
$("#my-div").toggle();
$("#my-div").click(function(){$("#my-div").toggle()})
})
//你甚至不需要设置#my-div .hide或!重要的是，只需粘贴/重复事件函数中的切换。
基于上面的答案，我刚刚添加了我自己的函数，这进一步不与可用的jquery函数如.hide()， .show()， .toggle()冲突。希望能有所帮助。
/*
* .hideElement()
* Hide the matched elements.
*/
$.fn.hideElement = function(){
$(this).addClass('hidden');
return this;
};
/*
* .showElement()
* Show the matched elements.
*/
$.fn.showElement = function(){
$(this).removeClass('hidden');
return this;
};
/*
* .toggleElement()
* Toggle the matched elements.
*/
$.fn.toggleElement = function(){
$(this).toggleClass('hidden');
return this;
};
