DIVをたくさん表示したり非表示にしたりする小さなWebアプリがあります。ただし、指定されたdivが最初に画面に表示されたかどうかを知る必要があるため、（jQueryの関数display:noneではなく） divを非表示にするCSSクラスをそのdivに追加する必要がある場合があります。hide()私は通常、jQueryを使用しaddClassますremoveClass。
しかし、これを行うときに問題が発生しています。以前にdivが非表示になって表示されていた場合、divにdisplay：noneクラスを追加しても機能しないようです。
を使わずに使えるような回避策はないかと思っていましたhide()。
これが私が話していることをあなたに示すためのいくつかのJSFiddleの例です：
JSFiddleの例1 -CSSクラスを使用してDIVを適切に非表示にします。
JSFiddleの例2 -show（）およびhide（）関数を使用した後、CSSクラスを使用してDIVを適切に非表示にしません。
発生する問題は、jQueryのhide（）関数が要素にインラインCSSを追加することです。
<div id="divTest" class="hideDiv" style="display: block;">
displayがに設定されている場合block、CSSルールでは「より厳密」と見なされるため、hideDivクラスはインラインで上書きされます。これに対するやや醜い回避策は、hideDivCSSルールを次のように変更することです。
.hideDiv
{
display: none !important;
}
この!important部分は、インラインCSSよりも優先されます。
編集：さらに、私はものを表示/非表示にする1つの方法（あなた自身またはjQuery）に固執することをお勧めします。すべての表示/非表示にjQueryの表示/非表示を使用しますが、追跡用のクラスを追加することもできます。そのクラスに要素を非表示にしないでください。
したがって、ボタンJavaScriptを次のようなものにする可能性があります。
$("#btnHideDiv").on("click", function()
{
$("#divTest").addClass("hideDiv");
$("#divTest").hide();
});
そして、hideDivクラスから非表示のCSSを完全に削除します。これで、jQueryを使用して、ページの読み込み後に非表示になっているdivを見つけることができます。非表示/表示が機能せず、に頼る必要もありません!important。
あなたの問題に対するよりエレガントな解決策だと思います。
私もこれをたくさん行いました-私の解決策は、.hide（）/ showをまったく使用せず、単に「隠し」cssクラスを作成し、それを切り替えるか、行ったように追加/削除することでした。
これを行う利点の1つは、.hasClassをクエリして、現在の状態を知る必要がある場合に（そのクラスによって）非表示になっているかどうかを確認できることです。最初に非表示にしたい場合は、そのクラスを要素のマークアップに追加するだけです。 。
これは、Jqueryhide()/show()がdivを非表示または表示するためのインライン表示プロパティを配置するためです。そのため、クラスは適用されません。.css('display','')使用後にdivをクリーンアップするために使用できますhide()/show()
これを試して：
CSSクラスに依存する代わりに、Javascript / jQueryを使用して、divのdisplayプロパティをnoneに設定するだけです。
代わりに試していただけませんか。
.hideDiv
{
opacity:0;
}