web-dev-qa-db-ja.com

Twitter Bootstrapを使用して要素を非表示にしてjQueryを使用して表示する方法

このような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を使用してそれを表示するための最も簡単な方法は何ですか？

javascriptjqueryhtmlcsstwitter-bootstrap
206
psylosss

正しい答え

ブートストラップ4.x

ブートストラップ4.xは新しい.d-noneクラスを使用します 。どちらか.hiddenの代わりに、またはBootstrap 4.xを使用している場合は.hideを使用する場合は.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の定義は docs にあります。

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}
342
Evan Carroll

単に：

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

あるいは、あなたがどういうわけかクラスがまだそこにいて欲しいならば：

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

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

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

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

show()とhide()は通常通りに機能します。

14
Dustin Graham

.hiddenの代わりにブートストラップ.collapseを使用してください。

JQueryの後半では、.show（）または.hide（）を使用してそれを操作できます。

14
Iván

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

.hideMe {
    display: none;
}

そしてこんな感じで使われる：

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

そして今jQueryの隠蔽の仕事

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

@ dustin-grahamが概説した方法は、私もそうする方法です。また、ブートストラップ3は、 getbootstrap のドキュメントに従って、 "hide"ではなく "hidden"を使用するようになりました。だから私はこのようなことをするだろう：

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

そうすれば、jQueryのshow()メソッドとhide()メソッドを使うときにはいつでも衝突は起こりません。

5
MichaelJTaylor

以下のようにして要素を開始します。

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

そして、見せたいイベントを次のように使います。

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

最も簡単な方法は私が信じていることです。

5
Théo T. Carranza

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

あなたがしたことを書き換えても構わないと思っているなら、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にこの問題に対する修正が付いてきたら、それを捨ててください。

2
badboy

ブートストラップ4では、d-noneクラスを使用して要素を完全に隠すことができます。 https://getbootstrap.com/docs/4.0/utilities/display/

2
Hossein

最近2.3から3.1にアップグレードするときにこれに遭遇しました。ページテンプレートの要素に hide を付けていたため、jQueryアニメーション（ slideDown ）が壊れました。私たちは、今では醜い ！important という規則を持っている、名前の付いたバージョンのBootstrapクラスを作成する方法に行きました。

.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...
2
JacksonT
$(function(){

$("#my-div").toggle();

$("#my-div").click(function(){$("#my-div").toggle()})

})

// #my-div.hideも!importantも設定する必要はありません。イベント関数のトグルを貼り付ける/繰り返すだけです。

2
Ray C Lin

ToggleClassを使うのが好きです。

var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);
2
AndreDurao

ブートストラップ4アルファ6用

Bootstrap 4では.hidden-xs-upを使う必要があります。

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes

.hidden - * - upクラスは、ビューポートが指定されたブレークポイント以上にあるときに要素を非表示にします。たとえば、.hidden-md-upは、中、大、および特大のビューポートで要素を非表示にします。

hidden HTML5属性もあります。

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

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

<input type="text" hidden>

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

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

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

1
Chloe

hideとhiddenはどちらも廃止予定で、後で削除され、新しいバージョンではもう存在しません。必要に応じてd-none/d-sm-none/invisibleなどのクラスを使うことができます。それらが削除されたと考えられる理由は、hidden/hideはCSSのコンテキストでは少し混乱するためです。 CSSでは、非表示（非表示）は表示用ではなく表示用に使用されます。可視性と表示は別物です。

もし可視性のためのクラスが必要なら：hidden、そして可視性ユーティリティからの見えないクラスが必要です。

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

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

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

1
Selay

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

Bootstrap CSSファイルを編集して問題を解決しました。Docを参照してください。

。隠す：

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1

.hide {
  display: none !important;
}

。隠しファイルは、私たちが今使うことになっているものですが、それは実際には：

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

"可視性"のため、jQueryの "fadeIn"は機能しません。

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

そして今、jQueryの "fadeIn（）"は動作します。

私がこれに対して上記の提案をした理由は、あなたが "removeClass（ '。hide'）"オブジェクトをすぐに表示し、そしてアニメーションをスキップしたからです:)

それが他の人たちを助けたことを願っています。

0
Ricky Levi

上記の答えに基づいて、私は私自身の関数を追加したところで、これは.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;
    };
0
Sagar Gala