javascript-如何开始我的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> 
John asked 2020-08-01T11:09:06Z
4个解决方案
63 votes

containerFoo是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的需求,并使该解决方案的扩展性大大提高。

为了处理动态添加的内容,您可以使用containerFoo而不是$("#containerFoo").on

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

(为了获得更好的性能,请确保所有这些切换图像都位于某个容器div中,例如containerFoo,然后执行$("#containerFoo").on而不是$(document).on(

Adam Rackis answered 2020-08-01T11:09:54Z
7 votes

使用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选择器

George Mauer answered 2020-08-01T11:10:23Z
3 votes

只需将style="display: none;"添加到div。 这将以隐藏状态启动div类。

当jQuery切换块时,样式将更改为块

Deepan Saravanan answered 2020-08-01T11:10:47Z
0 votes

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

Ranjith Kumar answered 2020-08-01T11:11:02Z
translate from https://stackoverflow.com:/questions/8648017/how-to-start-off-my-jquery-toggles-as-hidden