假设我创建了一个这样的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?
当前回答
有一个没有JQuery的解决方案
您可以使用CSS伪类:Active在单击时隐藏元素。这个伪类主要用于锚标记和按钮。
举个例子。
A:活动{显示:无;} /*活动链接*/ <a href="#">当它被点击时将会消失
带有按钮的示例
#btn-01:active ~ p { 显示:没有; ｝ <button id="btn-01"> click me</button> <p id="text">
其他回答
$(function(){
$("#my-div").toggle();
$("#my-div").click(function(){$("#my-div").toggle()})
})
//你甚至不需要设置#my-div .hide或!重要的是，只需粘贴/重复事件函数中的切换。
另一种解决这种烦恼的方法是创建自己的CSS类，在规则的末尾不设置!important，就像这样:
.hideMe {
display: none;
}
并像这样使用:
<div id="header-mask" class="hideMe"></div>
现在jQuery隐藏工作
$('#header-mask').show();
基于上面的答案，我刚刚添加了我自己的函数，这进一步不与可用的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;
};
@ dusin -graham所概述的方法也是我所做的。请记住，bootstrap 3现在使用“hidden”而不是“hide”，因为他们的文档在getbootstrap。所以我会这样做:
$(document).ready(function() {
$('.hide').hide().removeClass('hide');
$('.hidden').hide().removeClass('hidden');
});
那么无论何时使用jQuery的show()和hide()方法，都不会有冲突。
使用下面的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(显示);
希望对你们有帮助。: -)
