假设我创建了一个这样的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?
当前回答
使用下面的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之后再包含该文件。 使用语法使用它 $ () .hideShow(隐藏的); $ () .hideShow(显示);
希望对你们有帮助。: -)
其他回答
最近从2.3升级到3.1时遇到了这种情况;我们的jQuery动画(slideDown)崩溃了，因为我们在页面模板的元素上放置了隐藏。我们创建了以名字间隔的Bootstrap类版本，现在它带有丑陋的重要规则。
.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...
以如下方式初始化元素:
<div id='foo' style="display: none"></div>
然后，使用你想要显示它的事件，如下所示:
$('#foo').show();
我相信这是最简单的方法。
使用下面的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之后再包含该文件。 使用语法使用它 $ () .hideShow(隐藏的); $ () .hideShow(显示);
希望对你们有帮助。: -)
我喜欢使用toggleClass:
var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);
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();
});
