Как начать переключать jquery как скрытые? - PullRequest
Новая
       1

Как начать переключать jquery как скрытые?

43 голосов
/ 27 декабря 2011

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

Ответы [ 4 ]

63 голосов
/ 27 декабря 2011

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(

7 голосов
/ 27 декабря 2011

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

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

3 голосов
/ 20 августа 2016

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

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

0 голосов
/ 10 ноября 2018 

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