Как запустить мои переключатели jquery как скрытые?

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

javascript html toggle jquery
person John    schedule 27.12.2011    source источник

Ответы (3)


arrow_upward
69
arrow_downward

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(

person Adam Rackis    schedule 27.12.2011
comment
Мне понравилась часть об очистке моего jQuery! Для большей гибкости вы можете вместо этого использовать атрибут данных в переключателе, например data-toggles-element: "div-id". - person nitsas; 20.06.2017

arrow_upward
7
arrow_downward

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

Кстати, вместо использования селекторов идентификаторов вам, вероятно, следует использовать классы

person George Mauer    schedule 27.12.2011

arrow_upward
3
arrow_downward

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

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

person Deepan Saravanan    schedule 20.08.2016