たとえば、次のような 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を使用して表示する最も簡単な方法は何ですか?
このソリューションは非推奨です。投票数が最も多いソリューションを使用します。
このhideクラスは、ページの読み込み時にコンテンツを非表示にするのに役立ちます。
これに対する私の解決策は、初期化中に jquery の非表示に切り替えることです。
$('.targets').hide().removeClass('hide');
その後show()、hide()正常に機能するはずです。
この煩わしさに対処する別の方法は、次のように、ルールの最後に !important を設定しない独自の CSS クラスを作成することです。
.hideMe {
display: none;
}
そして次のように使用されます：
<div id="header-mask" class="hideMe"></div>
そして今、jQueryの隠蔽が機能します
$('#header-mask').show();
@dustin-grahamが概説した方法は、私もそうしています。getbootstrapのドキュメントに従って、bootstrap 3 は "hide" ではなく "hidden" を使用するようになったことも覚えておいてください。だから私はこのようなことをします：
$(document).ready(function() {
$('.hide').hide().removeClass('hide');
$('.hidden').hide().removeClass('hidden');
});
show()その後、jQueryとメソッドを使用するたびhide()に、競合は発生しません。
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);
あなたがやったことを書き直しても構わないと思っているなら、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 にこの問題の修正が含まれている場合は、破棄してください。
更新: これからは、 と を使用.collapseし$('.collapse').show()ます。
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] という名前の新しいグローバル属性を追加します。これは、デフォルトで display: none としてスタイル設定されています。PureCSS からアイデアを借りて、[hidden] { display: none !important; を作成することで、このデフォルトを改善します。表示が誤って上書きされるのを防ぐのに役立ちます。[hidden] は IE10 でネイティブにサポートされていませんが、CSS で明示的に宣言することでその問題を回避できます。
<input type="text" hidden>
レイアウトに影響を与えるものも.invisibleあります。
https://v4-alpha.getbootstrap.com/utilities/invisible-content/
.invisible クラスを使用して、要素の可視性のみを切り替えることができます。つまり、その表示は変更されず、要素は引き続きドキュメントの流れに影響を与えることができます。
d-noneブートストラップ 4 では、クラスを
使用して要素を完全に非表示にすることができます。https://getbootstrap.com/docs/4.0/utilities/display/
$(function(){
$("#my-div").toggle();
$("#my-div").click(function(){$("#my-div").toggle()})
})
// #my-div .hidenorを設定する必要さえありません!important。イベント関数にトグルを貼り付ける/繰り返すだけです。
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 ));
jQuery がインクルードされた後にファイルをインクルードします。
構文を使用して使用します
$().hideShow('非表示');
$().hideShow('表示');
皆さんのお役に立てば幸いです。:-)
上記の回答に基づいて、独自の関数を追加しましたが、.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」は、「可視性」のために機能しません。
そのため、最新の Bootstrap では .hide は使用されなくなりましたが、まだ min.css ファイルに含まれています。そのため、.hidden をそのままにして、「.hide」クラスから「!important」を削除しました (いずれにせよ廃止されるはずです)。ただし、独自の CSS でオーバーライドすることもできます。すべてのアプリケーションを同じように動作させたかったので、Bootstrap CSS ファイルを変更しました。
そして、jQuery の「fadeIn()」が機能するようになりました。
上記の提案に対してこれを行った理由は、「removeClass('.hide')」を実行するとオブジェクトがすぐに表示され、アニメーションをスキップするためです:)
それが他の人を助けたことを願っています。
ブートストラップ、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
Twitter Bootstrap は、コンテンツを切り替えるためのクラスを提供します。
私は jQuery の初心者で、彼らのドキュメントを読んだ後、Twitter Bootstrap + jQuery を組み合わせる別のソリューションにたどり着きました。
まず、別の要素 (クラス wsis-toggle) をクリックしたときに要素 (クラス wsis-collapse) を「非表示」および「表示」する解決策は、 .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 Bootstrap ののため、このインライン スタイルは効果がないため、.hiddenクラスを削除する必要がありますが、これはお勧め.removeClassしません! jQuery が何かを再び非表示にしようとすると、インライン スタイルも追加されるためです。
display: none
これは、AT (スクリーン リーダー) にも最適化されている Twitter Bootstrap の .hidden クラスと同じではありません。隠しdivを表示したい場合は、.hiddenTwitter Bootstrapのクラスを削除する必要があるため、重要なステートメントを削除しますが、再度非表示にする場合は、.hiddenクラスを元に戻したいです! これには [.toggleClass][3] を使用できます。
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle().toggleClass( "hidden" );
});
});
このようにして、コンテンツが非表示になるたびに隠しクラスを使用し続けます。
TBの.showクラスは、実際には jQuery のインライン スタイルと同じで、どちらも'display: block'. ただし、.showある時点でクラスが異なる場合は、このクラスも追加するだけです。
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
});
});