假设我创建了一个这样的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(显示);

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

其他回答

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为这个问题提供修复时,将其扔掉。

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

正确答案

引导4.倍

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

以如下方式初始化元素:

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

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

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

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

@ dusin -graham所概述的方法也是我所做的。请记住,bootstrap 3现在使用“hidden”而不是“hide”,因为他们的文档在getbootstrap。所以我会这样做:

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

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