Как начать с моих jquery переключений, как скрытых?

У меня есть код, который отображает три изображения и соответствующий div под каждым изображением. Используя функцию jQuery.toggle, я сделал так, чтобы каждый div переключился, когда щелкнуло изображение над ним. Есть ли способ сделать это так, чтобы divs начинались как скрытые?

Спасибо за ваше время,

КОД ЗАПРОС:

    <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>

Ответы

Ответ 1

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);
});

Это избавит вас от необходимости всех этих идентификаторов, а также сделает это решение намного, гораздо более расширяемым.

А для обработки динамически добавленного контента вы можете использовать on вместо click

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

(и для повышения производительности убедитесь, что все эти переключаемые изображения находятся в каком-то контейнере div, названном, скажем, containerFoo, а затем $("#containerFoo").on вместо $(document).on(

Ответ 2

С помощью 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 вы, вероятно, должны использовать классы

Ответ 3

Просто добавьте style="display: none;" в div. Это запустит класс div как скрытый.

Когда jQuery переключает блок, стиль затем будет изменен на block