假设我创建了一个这样的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 .collapse而不是.hidden
稍后在JQuery中，您可以使用.show()或.hide()来操作它
其他回答
简单:
$(function(){
$("#my-div").removeClass('hide');
});
或者如果你想让这个类仍然在那里:
$(function(){
$("#my-div").css('display', 'block !important');
});
此解决方案不建议使用。使用投票最多的解决方案。
hide类对于在页面加载时隐藏内容非常有用。
我的解决方案是在初始化期间，切换到jquery的隐藏:
$('.targets').hide().removeClass('hide');
然后show()和hide()应该正常工作。
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
另一种解决这种烦恼的方法是创建自己的CSS类，在规则的末尾不设置!important，就像这样:
.hideMe {
display: none;
}
并像这样使用:
<div id="header-mask" class="hideMe"></div>
现在jQuery隐藏工作
$('#header-mask').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(显示);
希望对你们有帮助。: -)
