jQueryでdivを非表示にする方法は?


83

HTMLを非表示<div>にする場合は、次のJavaScriptコードを使用します。

var div = document.getElementById('myDiv');
div.style.visibility = "hidden";
div.style.display = "none";

jQueryのそのコードに相当するものは何ですか?

回答:


154
$('#myDiv').hide();

または

$('#myDiv').slideUp();

または

$('#myDiv').fadeOut();

これは実際には3つすべて同じdisplay:noneで、3つの異なるアニメーション効果があります。正解は@ honk31によるもの.css("visibility", "hidden")で、目的があります。visiblity:hidden違ってはdisplay:noneいる間のスペースを使用し続けますdisplay:noneことは決してありません、既存のように動作します。
開発者

1
@Developer興味深く、潜在的に有用な点ですが、あなたのソリューションが望ましい効果であったことを示すものはまったくありません。それどころか、OPは彼らの質問に非常によく答えることを見つけたようです。私の目的でも、スペースを占有し続けることは実際にはかなり望ましくありません。傲慢にならないでください。
donutguy6 4020年

RTFMの前に言っていたように。最初の投稿で、可視性=「非表示」と表示=「なし」の違いは何かと尋ねられましたが、非表示のアニメーションを作成する方法を尋ねたことはありますか?トピックにとどまります!
開発者


27
$("#myDiv").hide();

css表示をnoneに設定します。可視性も非表示に設定する必要がある場合は、

$("#myDiv").css("visibility", "hidden");

または両方をチェーンで組み合わせる

$("#myDiv").hide().css("visibility", "hidden");

または、1つのcss()関数ですべてを記述します

$("#myDiv").css({
  display: "none",
  visibility: "hidden"
});

この答えは正解として選択する必要があります。なぜ人々が完全に間違った答えに投票したのかわかりません。
開発者

14

要素にそのスペースを保持させたい場合は、次を使用する必要があります。

$('#myDiv').css('visibility','hidden')

要素にそのスペースを保持させたくない場合は、次を使用できます。

$('#myDiv').css('display','none')

または単に、

$('#myDiv').hide();

7

$("myDiv").hide();そして$("myDiv").show();それだけでなくInternet Explorerで動作しません。

これを回避する方法は、myDivを使用したhtmlコンテンツを取得することでした .html()

次に、新しく作成したDIVに書き込みました。私は、身体へのDIVを追加し、変数の内容を追加ContentHiddenField、私はDIVを見せたかったときに、新しく作成されたdiv要素からその内容を読み取ります。

.remove()メソッドを使用して、一時的にDIVhtmlを保持していたDIVを削除した後。

var Content = $('myDiv').html(); 
        $('myDiv').empty();
        var hiddenField = $("<input type='hidden' id='myDiv2'>");
        $('body').append(hiddenField);
        HiddenField.val(Content);

そして、コンテンツをもう一度表示したいとき。

        var Content = $('myDiv');
        Content.html($('#myDiv2').val());
        $('#myDiv2').remove();

これは.hide().show()メソッドよりも信頼性が高かった。



弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.