このような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>

そのHTML要素をjQuery / Javascriptで表示および非表示にするにはどうすればよいですか。

JavaScript：

$(function(){
  $("#my-div").show();
});

結果：（これらのいずれかで）。

上記の要素を非表示にしたい。

Bootstrapを使用して要素を非表示にし、jQueryを使用して表示する最も簡単な方法は何ですか？

正しい答え

ブートストラップ4.x

Bootstrap 4.xは新しい.d-noneクラスを使用します。のいずれか を使用する代わりに.hidden、または.hideBootstrap 4.xを使用して.d-noneいる場合はを使用してください。

<div id="myId" class="d-none">Foobar</div>

• それを表示するには： $("#myId").removeClass('d-none');
• 非表示にするには： $("#myId").addClass('d-none');
• 切り替えるには： $("#myId").toggleClass('d-none');

（Fangmingのコメントに感謝）

ブートストラップ3.x

まず、使用しないでください.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;
}

単に：

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

または、どういうわけかクラスをまだそこに残したい場合：

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

.hiddenの代わりにブートストラップ.collapseを使用する

後でJQueryで.show（）または.hide（）を使用して操作できます

このソリューションは非推奨です。上位投票ソリューションを使用します。

このhideクラスは、ページの読み込み時にコンテンツを非表示にしておくのに役立ちます。

これに対する私の解決策は、初期化中に、jqueryの非表示に切り替えます。

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

その後show()、hide()通常どおり機能します。

この煩わしさを解消するもう1つの方法は、次のように、ルールの最後に！importantを設定しない独自のCSSクラスを作成することです。

.hideMe {
    display: none;
}

そしてそのように使用されます：

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

そして今jQuery非表示の作品

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

概説されている@ dustin-grahamの方法は、私もその方法です。また、bootstrap 3は、getbootstrapのドキュメントに従って、 "hide"ではなく "hidden"を使用することにも注意してください。だから私はこのようなことをします：

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

そうすれば、jQuery show()とhide()メソッドを使用するたびに、競合が発生しなくなります。

要素を次のように開始します：

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

次に、表示するイベントを次のように使用します。

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

行くのに最も簡単な方法だと思います。

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

私は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 .hidenor を設定する必要もありません!important。

最近、2.3から3.1にアップグレードするときにこれに遭遇しました。ページテンプレートの要素に非表示を設定していたため、jQueryアニメーション（slideDown）が壊れました。重要なルールを実装したBootstrapクラスの名前空間付きバージョンを作成する方法を採用しました。

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

ラズの答えは、あなたが行ったことを書き直そうとするなら、良いことです。

同じ問題があり、次のように解決しました：

/**
 * 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では、d-noneクラスを使用して要素を完全に非表示にすることができます。 https://getbootstrap.com/docs/4.0/utilities/display/

更新：これからはとを使用.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-md-upは、中、大、および特大のビューポートで要素を非表示にします。

hiddenHTML5属性もあります。

https://v4-alpha.getbootstrap.com/content/reboot/#html5-hidden-attribute

HTML5は、[hidden]という名前の新しいグローバル属性を追加します。これは、表示としてスタイルが設定されています。デフォルトではなしです。PureCSSからアイデアを借用し、[非表示] {表示：なし！}表示が誤って上書きされるのを防ぐのに役立ちます。[非表示]はIE10でネイティブにサポートされていませんが、CSSでの明示的な宣言はその問題を回避します。

<input type="text" hidden>

.invisibleレイアウトに影響を与えるものもあります。

https://v4-alpha.getbootstrap.com/utilities/invisible-content/

.invisibleクラスを使用して、要素の表示のみを切り替えることができます。つまり、その表示は変更されず、要素はドキュメントのフローに影響を与える可能性があります。

非表示と非表示の両方が非推奨になり、後で削除されました。新しいバージョンには存在しません。必要に応じて、d-none / d-sm-none / invisibleなどのクラスを使用できます。それらが削除された可能性のある理由は、非表示/非表示がCSSコンテキストで少し混乱するためです。CSSでは、非表示（非表示）は表示ではなく可視性に使用されます。可視性と表示は異なります。

visibility：hiddenのクラスが必要な場合は、表示ユーティリティから非表示のクラスが必要です。

以下の可視性ユーティリティと表示ユーティリティの両方を確認してください。

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

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

jQueryを拡張するBootstrap 4には、次のスニペットを使用します。

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

1. 上記のコードをファイルに入れます。「myJqExt.js」としましょう

2. jQueryが含まれた後にファイルを含めます。

3. 構文を使用して使用します

   $（）。hideShow（ 'hide'）;

   $（）。hideShow（ 'show'）;

皆さんがお役に立てば幸いです。:-)

ブートストラップ、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

上記の回答に基づいて、私は自分の関数を追加しました。これは、.hide（）、. show（）、. toggle（）などの使用可能なjquery関数と競合しません。それが役に立てば幸い。

    /*
     * .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;
    };

Bootstrap CSSファイルを編集して問題を解決しました。ドキュメントを参照してください。

。隠す：

.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の「fadeIn」は「可視性」のため機能しません。

したがって、最新のブートストラップでは、.hideは使用されなくなりましたが、それはまだmin.cssファイルにあります。そのため、.hidden AS ISを残し、「！hide」クラスから「！important」を削除しただけです（とにかく非推奨になるはずです）。しかし、あなた自身のCSSでそれをオーバーライドすることもできます。私はすべてのアプリケーションが同じように動作するようにしたかったので、Bootstrap CSSファイルを変更しました。

そして今、jQuery "fadeIn（）"が機能します。

これを上記の提案に対して行った理由は、「removeClass（ '。hide'）」するとオブジェクトがすぐに表示され、アニメーションをスキップするためです:)

それが他の人の役に立つことを願っています。

☀️より正しい答え

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

Twitter Bootstrapは、コンテンツを切り替えるためのクラスを提供します。https：//github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.lessを参照してください。

私はjQueryを完全に使い始めたばかりで、彼らのドキュメントを読んだ後、Twitter Bootstrap + jQueryを組み合わせる別のソリューションにたどり着きました。

まず、「非表示」と「ショー」要素（クラスWSIS-崩壊）別の要素をクリックする（クラスWSIS-トグル）、解決策を使用することです.toggle。

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

また、.wsis-collapseTwitter Bootstrap（V3）クラスを使用して要素を非表示にしています.hidden。

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

をクリックする.wsis-toggleと、jQueryがインラインスタイルを追加します。

display: block

!importantTwitterブートストラップ内にあるため、このインラインスタイルは効果がないため、.hiddenクラスを削除する必要がありますが、これはお勧め.removeClassしません！jQueryが何かを再び非表示にするので、インラインスタイルも追加されます。

display: none

これは、AT（スクリーンリーダー）にも最適化されたTwitter Bootstrapの.hiddenクラスとは異なります。したがって、非表示のdivを表示したい場合は.hidden、Twitter Bootstrap のクラスを削除する必要があるため、重要なステートメントを削除しますが、もう一度非表示にした場合は、.hiddenクラスを再び表示したいです。これには[.toggleClass] [3]を使用できます。

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

これにより、コンテンツが非表示になるたびに非表示クラスを使い続けることができます。

.showTB のクラスは、実際にはjQueryのインラインスタイルと同じ'display: block'です。ただし.show、ある時点でクラスが異なる場合は、このクラスも追加するだけです。

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