Question

我有一些代码可以在每个图像下显示三个图像和一个相应的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>

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

这将消除您对所有这些ID的需求，并且还可以使此解决方案更加可扩展。

要处理动态添加的内容，您可以使用on代替click

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

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

Answer 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选择器

Answer 3

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

当jQuery切换块时，样式将更改为阻止

Answer 4

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

如何开始我的jquery切换为隐藏？

4 个答案: