Twitter Bootstrap cssクラスのjQuery show（）が非表示

私はTwitterのブートストラップを使用していると私はjQueryのことがわかりshow()またはfadeIn()クラスでマークされたDOM要素を作成しませんhiddenjQueryの機能のみを取り除くため、表示されるdisplay: none仕様に。ただし、visibilityはまだに設定されていhiddenます。

これを回避するための最良の方法は何ですか？

1. hidden要素のクラスを削除します
2. 可視性プロパティを変更する
3. 自分のCSSで隠しクラスを上書きする

特に、jQueryまたはcssでこれを修正する方が良いかどうか、およびその理由を知りたいです。

あなたが探しているCSSクラスはです.collapse。これは要素をdisplay: none;

したがって、使用$('#myelement').show()は適切に機能します。

更新： ブートストラップv3.3.6は.collapseを次のように更新しました：

.collapse {
  display: none;
}

これにより、目に見えない要素がフェードインし、クラスが削除されます

$('#element.hidden').css('visibility','visible').hide().fadeIn().removeClass('hidden');

http://jsfiddle.net/7qxVL/

要素を非表示にする必要がない場合（つまり、スペースを占有する場合）は、.hiddenを再定義する必要があります（ローカルのCSSでは、ブートストラップソースを変更しないでください。ローカルのLESSファイルでも変更しないでください）。

警告：

bootstrap 3.3.0が.collapseを次のように変更しました：

.collapse {
  display: none;
  visibility: hidden;
}

これは、jQuery.show（）の重大な変更であり、インラインに戻す必要がありました。

<div class="alert alert-danger" style="display:none;" >
</div>      

次のようにjQueryを引き続き使用するには：

$('.alert').html("Change a few things up and try submitting again.").show()

ブートストラップ3.3.0で「display：none」だけを適用できる唯一のクラスは、

.navbar {
  display: none;
}

私も同じ問題を抱えていました。私はこのパッチを使用しました：

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

次に、アプリケーションが新しい要素を生成して追加/追加するため、別の問題が発生しました。私がやったことは、私が行う新しい要素を生成した後です：

var newEl = ...;
$(newEl).find('.hidden').hide().removeClass('hidden');

私にとってそれは、ブートストラップが!importantクラスの非表示と非表示の両方にハックを使用しているためでした。

したがってshow()、jqueryで提供されるetcメソッドを使用することはできません。代わりに、さらに恐ろしいコードを上書きして、ハッキングしたコードを上書きする必要があります。

$('#myelement').attr('style', 'display: block !important');

！importantは最後の手段であり、実際にはブートストラップのようなコアライブラリでは使用しないでください。

これは機能しますが、最初の答えを試し、クラスをに変更します.collapse。

.toggleClass('hidden')