jQueryとCSS-表示の削除/追加：なし

私はこのクラスのdivを持っています：

.news{
  width:710px; 
  float:left;
  border-bottom:1px #000000 solid;
  font-weight:bold;
  display:none;
}

そして、いくつかのjQueryメソッドでそのdisplay：noneを削除したいと思います。（そのため、divが表示されます）そしてそれを再度追加します（したがって、divがシャドウします）。

どうすればできますか？乾杯

非表示にする div

$('.news').hide();

または

$('.news').css('display','none');

を表示するにはdiv：

$('.news').show();

または

$('.news').css('display','block');

jQueryは以下を提供します。

$(".news").hide();
$(".news").show();

その後、要素を簡単に表示および非表示にすることができます。

それで、サンプルコードを挙げましょう：

<div class="news">
Blah, blah, blah. I'm hidden.
</div>

<a class="trigger">Hide/Show News</a>

リンクをクリックすると、divを表示するトリガーになります。したがって、JavaScriptは次のようになります。

$('.trigger').click(function() {
   $('.news').toggle();
});

ほとんどの場合、要素を非表示および表示するためのスタイル設定をjQueryに処理させることをお勧めします。

編集：上記の人々が.showとの使用を推奨し.hideているようです。.toggle1つの効果で両方を実行できます。いいですね。

JavaScriptの場合：

getElementById("id").style.display = null;

jQueryの場合：

$("#id").css("display","");

トグルを使用して、表示と非表示を切り替えます。

$('#mydiv').toggle()

http://jsfiddle.net/jNqTa/で実際の例を確認してください

要素を表示/非表示にするクラスを追加することをお勧めします：

.hide { display:none; }

次に、jqueryの.toggleClass（）を使用して要素を表示/非表示にします。

$(".news").toggleClass("hide");

jQueryのcss-apiを使用してインライン「display：none」を削除する唯一の方法は、空の文字列（null動作しません!!）。

jQueryドキュメントによると、これは一度設定したインラインスタイルプロパティを「削除」する一般的な方法です。

$("#mydiv").css("display","");

または

$("#mydiv").css({display:""});

トリックを正しく行う必要があります。

私見jQueryには、「再表示」または「表示」と呼ばれるメソッドがありません。このメソッドは、別のインラインスタイルプロパティを設定するだけでなく、上記のように表示値を適切に設定解除します。または、おそらくhide()初期インライン値を保存し、それshow()を復元する必要があります...

jQueryの.show（）および.hide（）関数がおそらく最善の策です。

あなたは私たちに多くの情報を与えていませんが、一般的にこれは解決策かもしれません：

$("div.news").css("display", "block");

何らかの理由で、トグルが機能しなかったため、uncaught type error toggle is not a functionブラウザーで要素を検査するとエラーが発生しました。だから私は次のコードを使用し、それが私のために働き始めました。

$(".trigger").click(function () {
    $('.news').attr('style', 'display:none');
})

使用されたjqueryスクリプトファイルjquery-2.1.3.min.js。

.hide()または.show()にしたい要素がたくさんある場合、.hide(0)またはを使用していても.show(0)、0パラメータがアニメーションの継続時間であっても、必要なことを行うために多くのリソースを浪費することになります。

要素の表示属性を操作するためだけに使用されていたPrototype.js .hide()および.show()メソッドとは対照的に、jQueryの実装はより複雑であり、多数の要素には推奨されません。

この場合、おそらく.css('display','none')非表示に.css('display','')して表示する必要があります

.css('display','block') 特にインライン要素、テーブル行（実際には任意のテーブル要素）などを使用している場合は、避けてください。

ロレスクのコメントをベストアンサーと見なすと、属性またはクラスを追加して、通常のプロパティとは異なる表示プロパティを持つ要素を表示/非表示にすることができます。サイトに下位互換性が必要な場合は、クラスを作成して追加/削除して表示することをお勧めします/要素を表示

.news-show {
display:inline-block;
}

.news-hide {
display:none;
}

inline-blockをお好みの表示方法に置き換え、後方にある場合はshow / hideの代わりにjquerys addclass https://api.jquery.com/addclass/とremoveclass https://api.jquery.com/removeclass/を使用します互換性は問題ありません。このような属性を使用できます。

.news[data-news-visible=show] {
display:inline-block;
}

.news[data-news-visible=hide] {
display:none;
}

そして、jquerys attr（）http://api.jquery.com/attr/を使用して、要素を表示および非表示にします。

この方法で要素を表示/非表示にするときに、どちらの方法を使用してもcss3アニメーションを簡単に実装できます

代わりにshow()add display:blockを使用すると、問題がdisplay:hide発生する可能性があります。

これを回避するには、プロパティdisplay:noneを持つクラスを作成し、でその要素のクラスを切り替えますtoggleClass()。

$("button").on('click', function(event){  $("div").toggleClass("hide"); });

.hide{
   display:none;
}

div{
   width:40px;
   height:40px;
   background:#000;
   margin-bottom:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<button>Toggle Box</button>

これについて言及した回答はありません。