小开

简单:

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

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

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

小开

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

hide类用于在页面加载时保持内容隐藏。

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

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

那么show()和hide()应该正常工作。

小开

我喜欢使用toggleClass:

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

小开

$(function(){


$("#my-div").toggle();


$("#my-div").click(function(){$("#my-div").toggle()})


})

//你甚至不需要设置#my-div .hide或!important，只需在事件函数中粘贴/重复切换。

小开

另一种解决这种烦恼的方法是创建自己的CSS类，在规则的末尾不设置!important，就像这样:

.hideMe {
display: none;
}

并像这样使用:

<div id="header-mask" class="hideMe"></div>

现在jQuery隐藏工作

$('#header-mask').show();

小开

最近从2.3升级到3.1时遇到了这种情况;我们的jQuery动画(slideDown)坏了，因为我们把隐藏放在页面模板的元素上。我们创建了以名称间隔的Bootstrap类版本，现在它携带了丑陋的重要的!规则。

.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...

小开

@ dusin -graham所概述的方法也是我所做的。还要记住，bootstrap 3现在使用“hidden”而不是“hide”，正如他们在getbootstrap的文档中所述。所以我会这样做:

$(document).ready(function() {
$('.hide').hide().removeClass('hide');
$('.hidden').hide().removeClass('hidden');
});

那么无论何时使用jQuery show()和hide()方法，都不会有冲突。

小开

Twitter Bootstrap提供了用于切换内容的类，参见https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less。

我对jQuery完全不熟悉，在阅读了他们的文档后，我想到了另一个解决方案，将Twitter Bootstrap + jQuery结合起来。

首先，当点击另一个元素(类wsis-toggle)时，“隐藏”和“显示”一个元素(类wsis-collapse)的解决方案是使用.toggle。

jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle();
});
});

你已经通过使用Twitter Bootstrap (V3)类.hidden隐藏了元素.wsis-collapse:

.hidden {
display: none !important;
visibility: hidden !important;
}

当你点击.wsis-toggle时，jQuery会添加一个内联样式:

display: block

由于Twitter Bootstrap中的!important，这种内联样式没有效果，所以我们需要删除.hidden类，但我不建议为此使用.removeClass !因为当jQuery要再次隐藏一些东西时，它也添加了一个内联样式:

display: none

这与Twitter Bootstrap的.hidden类不同，后者也针对AT(屏幕阅读器)进行了优化。所以，如果我们想要显示隐藏的div，我们需要去掉Twitter Bootstrap的.hidden类，这样我们就去掉了重要的语句，但如果我们再次隐藏它，我们想要再次拥有.hidden类!我们可以用[。toggleClass][3]。

jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle().toggleClass( "hidden" );
});
});

这样，每次隐藏内容时都可以继续使用隐藏类。

TB中的.show类实际上与jQuery的内联样式相同，都是'display: block'. jQuery类。但是如果.show类在某些时候会有所不同，那么你只需添加这个类:

jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
});
});

小开

我通过编辑引导CSS文件解决了我的问题，查看他们的文档:

hide:

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1


.hide {
display: none !important;
}

.hidden是我们现在应该使用的，但它实际上是:

.hidden {
display: none !important;
visibility: hidden !important;
}

jQuery的“淡出”将无法工作，因为“可见性”。

所以，对于最新的Bootstrap， .hide不再使用，但它仍然在min.css文件中。所以我保留。隐藏原样，只是删除了"!重要的“从”。类(无论如何都应该被弃用)。但是你也可以在你自己的CSS中覆盖它，我只是想让我所有的应用程序都一样，所以我改变了Bootstrap CSS文件

现在jQuery的“fadeIn()”工作。

我这样做的原因与上面的建议相比，是因为当你“removeClass('.hide')”对象立即显示出来，你跳过动画:)

我希望它能帮助到其他人。

小开

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();
});

小开

Razz的答案很好，如果你愿意重写你所做的。

遇到了同样的麻烦，用以下方法解决了这个问题:

.

/**
* The problem: https://github.com/twbs/bootstrap/issues/9881
*
* This script enhances jQuery's methods: show and hide dynamically.
* If the element was hidden by bootstrap's css class 'hide', remove it first.
* Do similar in overriding the method 'hide'.
*/
!function($) {
"use strict";


var oldShowHide = {'show': $.fn.show, 'hide': $.fn.hide};
$.fn.extend({
show: function() {
this.each(function(index) {
var $element = $(this);
if ($element.hasClass('hide')) {
$element.removeClass('hide');
}
});
return oldShowHide.show.call(this);
},
hide: function() {
this.each(function(index) {
var $element = $(this);
if ($element.hasClass('show')) {
$element.removeClass('show');
}
});
return oldShowHide.hide.call(this);
}
});
}(window.jQuery);

当Bootstrap为这个问题提供修复时，将其扔掉。

小开

最佳答案

正确答案

引导4.倍

引导4。x使用新的.d-none类。而不是使用或 __ABC1，或__ABC2如果你使用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!正如其他人所说，.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;
}

小开

Bootstrap, JQuery，命名空间…简单的有什么问题:

var x = document.getElementById('my-div');
x.className.replace(/\bhide\b/, ''); //remove any hide class
x.style.display = ''; //show
x.style.display = 'none'; //hide

你可以创建一个小的帮助函数，与KISS兼容:

function mydisplay(id, display) {
var node = (typeof id == 'string') ? document.getElementById(id) : id;
node.className.replace(/\bhide\b/, '');
if (node) {
if (typeof display == 'undefined') {
display = (node.style.display != 'none');
} else if (typeof display == 'string' && display == 'toggle') {
display = mydisplay(node, !mydisplay(node));
} else {
node.style.display = (display) ? '' : 'none';
}
}
return display;
}
is_hidden = mydisplay('my-div'); //actual state
mydisplay('my-div', false); //hide
mydisplay('my-div', true); //show
mydisplay('my-div', 'toggle'); //toggle state

小开

以如下方式初始化元素:

<div id='foo' style="display: none"></div>

然后，使用你想要显示它的事件，如下所示:

$('#foo').show();

我相信这是最简单的方法。

小开

使用bootstrap .collapse而不是.hidden

稍后在JQuery中，您可以使用.show()或.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;
};

小开

更新:从现在开始，我使用.collapse和$('.collapse').show()。

对于Bootstrap 4 Alpha 6

对于Bootstrap 4，必须使用.hidden-xs-up。

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes

.hidden-*-up类在视口位于给定断点或更宽位置时隐藏元素。例如，.hidden- mup隐藏中型、大型和超大视口上的元素。

还有hidden 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类只能用来切换元素的可见性，这意味着它的显示不会被修改，元素仍然可以影响文档的流程。

小开

hide和hidden都已弃用并在以后被删除，在新版本中不再存在。你可以根据需要使用d-none/d-sm-none/invisible等类。它们被删除的可能原因是隐藏/隐藏在CSS上下文中有点令人困惑。在CSS中，隐藏(hidden)用于可见性，而不是用于显示。可见性和显示性是不同的东西。< / p >

如果你需要一个类用于可见性:hidden，那么你需要来自可见性实用程序的不可见类。

检查下面的可见性和显示实用程序:

https://getbootstrap.com/docs/4.1/utilities/visibility/

https://getbootstrap.com/docs/4.1/utilities/display/

小开

在bootstrap 4中，你可以使用d-none类来完全隐藏一个元素。 https://getbootstrap.com/docs/4.0/utilities/display/ < / p >

小开

使用下面的Bootstrap 4代码片段，它扩展了jQuery:

(function( $ ) {


$.fn.hideShow = function( action ) {


if ( action.toUpperCase() === "SHOW") {
// show
if(this.hasClass("d-none"))
{
this.removeClass("d-none");
}


this.addClass("d-block");


}


if ( action.toUpperCase() === "HIDE" ) {
// hide
if(this.hasClass("d-block"))
{
this.removeClass("d-block");
}


this.addClass("d-none");
}


return this;
};


}( jQuery ));

把上面的代码放到一个文件中。让我们假设"myJqExt.js"
包含jQuery之后的文件。

李< / p > < / >
使用语法

$ () .hideShow(隐藏的);

$ () .hideShow(“秀”);< / p >

希望对你们有帮助。: -)

小开

☀️正确答案

在Bootstrap 4中隐藏元素:

<p id="insufficient-balance-warning" class="d-none alert alert-danger">Pay me</p>

🛑然后，当然，你可以从字面上显示它:

if (pizzaFundsAreLow) {
$('#insufficient-balance-warning').removeClass('d-none');
}

💓但是如果你以语义的方式，通过将责任从Bootstrap转移到jQuery，那么你可以使用其他jQuery的细节，如衰落:

if (pizzaFundsAreLow) {
$('#insufficient-balance-warning').hide().removeClass('d-none').fadeIn();
}

小开

有一个没有JQuery的解决方案

可以使用CSS伪类:Active在单击时隐藏元素。这个伪类主要用于锚标记和按钮。

举个例子。

a:active { display: none; }         /* Active links */

<a href="#">This will dissapear when it is clicked.</a>

带有按钮的示例

#btn-01:active ~ p {
display: none;
}

<button id="btn-01"> click me</button>
<p id="text">Some Example Text</p>

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