web-dev-qa-db-ja.com

jqueryトグルを非表示として開始するにはどうすればよいですか？

3つの画像と各画像の下にそれぞれのdivを表示するコードがあります。 jquery .toggle関数を使用して、上の画像がクリックされたときに各divが切り替わるように作成しました。 divが非表示として開始されるようにする方法はありますか？

お時間をいただきありがとうございます、

参考コード：

    <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#picOne").click(function(){
$("#one").toggle(250);


 });

$("#picTwo").click(function(){
    $("#two").toggle(250);
  });


  $("#picThree").click(function(){
    $("#three").toggle(250);
  });

});
</script>
</head>

<body>


    <center>
    <h2>Smooth Transitions</h2>


    <img src="one.png" id="picOne">
        <div id="one">
        <p>first paragraph.</p>
        </div>

    <img src="two.png" id="picTwo">

        <div id="two" visibility="hidden">
        <p>Second Pair of giraffe.</p>
        </div>


    <img src="three.png" id="picThree">

        <div id="three">
        <p>Thiird paragraph.</p>
        </div>



</center>
</body>
</html>
javascriptjqueryhtmltoggle
43
John

visibilityはcssプロパティです。しかし、ディスプレイはどんなイベントでもあなたが望むものです

_<div id="two" style="display:none;">
  <p>Second Pair of giraffe.</p>
</div>
_

または、インラインcssを捨てて、切り替えられる各divにcssクラスを与えます

_<div id="two" class="initiallyHidden">
_

その後

_.initiallyHidden { display: none; }
_

また、jQueryを少しクリーンアップすることもできます。トグルの原因となる画像にcssクラスを与えます

_    <img src="one.png" class="toggler">
    <div>
    <p>first paragraph.</p>
    </div>
_

その後

_$("img.toggler").click(function(){
    $(this).next().toggle(250);
});
_

これにより、これらすべてのIDが不要になり、このソリューションがさらに拡張可能になります。

動的に追加されたコンテンツを処理するには、onの代わりにclickを使用できます

_$(document).on("click", "img.toggler", function(){
    $(this).next().toggle(250);
});
_

（およびパフォーマンスを向上させるために、これらの切り替えイメージはすべて、たとえばcontainerFooという名前のコンテナdivにあることを確認してから、$("#containerFoo").onの代わりに$(document).on(を実行します。

63
Adam Rackis

CSSの場合：

#one, #two, #three { display: none; }

JQueryを使用

$(function() {  //once the document is ready
  $('h2').nextAll('img') //select all imgs following the h2
    .find('div')  //select all contained divs
    .hide();
})

ところで、IDセレクターを使用するのではなく、おそらくクラスを使用する必要があります

7
George Mauer

style="display: none;"をdivに追加するだけです。これにより、divクラスが非表示として開始されます。

JQueryがブロックを切り替えると、スタイルはブロックに変更されます

3
Deepan Saravanan
<style>
.reply {
    display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("form").toggle();
    });
});
</script>
</head>
<body>

<button>Toggle between hiding and showing the paragraphs</button>

<form action="#" class="row m0 comment_form reply" >
  <h5>post your comment:</h5>
  <textarea class="form-control"></textarea>
  <input type="submit" value="submitnow" class="btn btn default">
  </form>
0
Ranjith Kumar