如何让我的jQuery切换默认为隐藏状态？

Question

如何让我的jQuery切换默认为隐藏状态？

46

我有一些代码，它显示了三张图片和每个图像下面的一个相应的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

4个回答

7

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

3

只需将style="display: none;"添加到div中，即可隐藏该div。这将使div类开始处于隐藏状态。

当jQuery切换块时，样式将被更改为块级元素。

- Deepan Saravanan

0

<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

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adam Rackis · Accepted Answer

visibility 是一个 CSS 属性。但是在任何情况下，你都需要使用display属性。

<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代码。给触发toggle的图片添加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(）