Javascript 如何开始我的 jquery 切换为隐藏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8648017/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to start off my jquery toggles as hidden?
提问by John
I have some code which displays three images and a respective div under each image. Using the jquery .toggle function I have made it so each div will toggle when the image above it is clicked. Is there any way to make it so the divs start off as hidden?
我有一些代码可以在每个图像下显示三个图像和一个相应的 div。使用 jquery .toggle 函数我已经做到了，所以当点击上面的图像时，每个 div 都会切换。有什么办法可以让div从隐藏开始？
Thank you for your time,
感谢您的时间，
CODE FOR REFERENCE:
参考代码：
<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>
回答by Adam Rackis
visibilityis a cssproperty. But display is what you want in any event
visibility是一个css属性。但是显示是您在任何情况下都想要的
<div id="two" style="display:none;">
<p>Second Pair of giraffe.</p>
</div>
Or ditch the inline css and give each div to be toggled a css class
或者抛弃内联 css 并给每个要切换的 div 一个 css 类
<div id="two" class="initiallyHidden">
and then
进而
.initiallyHidden { display: none; }
And you can also clean up your jQuery a bit. Give your toggle-causing images a css class
你也可以稍微清理一下你的 jQuery。给你的触发图像一个 css 类
<img src="one.png" class="toggler">
<div>
<p>first paragraph.</p>
</div>
And then
进而
$("img.toggler").click(function(){
$(this).next().toggle(250);
});
This would obviate your need for all those IDs, and would also make this solution much, much more extensible.
这将消除您对所有这些 ID 的需求，并且还将使该解决方案更具可扩展性。
And to handle dynamically added content, you could use oninstead of click
并且要处理动态添加的内容，您可以使用on代替click
$(document).on("click", "img.toggler", function(){
$(this).next().toggle(250);
});
(and for better performance, make sure all these toggling images are in some container div, named, say, containerFoo, then do $("#containerFoo").oninstead of $(document).on(
（为了更好的性能，请确保所有这些切换图像都在某个容器 div 中，命名为，例如containerFoo，，然后执行$("#containerFoo").on而不是$(document).on(
回答by George Mauer
With css:
使用 CSS：
#one, #two, #three { display: none; }
With jQuery
使用 jQuery
$(function() { //once the document is ready
$('h2').nextAll('img') //select all imgs following the h2
.find('div') //select all contained divs
.hide();
})
By the way, rather than using id selectors you should probably use classes
顺便说一句，您应该使用类而不是使用 id 选择器
回答by Deepan Saravanan
Just add style="display: none;"to the div. This will start the div class as hidden.
只需添加style="display: none;"到div。这将启动 div 类作为隐藏。
When the jQuery toggles the block, style will then be changed to block
当 jQuery 切换块时，样式将更改为块
回答by Ranjith Kumar
<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>