jQuery 在jQuery中默认折叠slideToggle()元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/332592/
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
Making slideToggle() elements collapsed by default in jQuery
提问by Craig Walker
I have a set of divs that I want to make collapsible/expandableusing jQuery's slideToggle()method. How do I make all of these divs collapsed by default? I'd like to avoid explicitly calling slideToggle()on each element during/after page rendering.
我有一组想要collapsible/expandable使用 jQueryslideToggle()方法制作的 div 。默认情况下，如何使所有这些 div 折叠？我想避免slideToggle()在页面渲染期间/之后显式调用每个元素。
回答by netadictos
You will have to assign a style: display:none to these layers, so that they are not displayed before javascript rendering. Then you can call slideToggle() without problems. Example:
您必须为这些图层分配一个 style: display:none ，以便在 javascript 渲染之前不会显示它们。然后你可以毫无问题地调用 slideToggle() 。例子：
<style type="text/css">
.text{display:none}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('span.more').click(function() {
$('p:eq(0)').slideToggle();
$(this).hide();
});
});
</script>
<body>
<p class="text">
I am using jquery <br/>
I am using jquery <br/>
I am using jquery <br/>
I am using jquery <br/>
I am using jquery <br/>
I am using jquery <br/>
</p>
<span class="more">show</span>
回答by Anne Porosoff
you probably can do something like this:
你可能可以做这样的事情：
$(document).ready(function(){
$('div').hide();
});
回答by Dave Ward
You can start your elements with style="display: none;" and slideToggle() will take it from there.
你可以用 style="display: none;" 开始你的元素 和 slideToggle() 将从那里获取它。
回答by BrettWeber
Applying a CSS style behind the scenes will, as stated before, cause complications for users with scripts disabled. A way around this is to declare your element hidden as Anne said, or by defining your CSS in your script as a function to be altered, not as styling for the page (to keep structure, style and function separate) and then using the toggleClass function of the script or the custom effect hide functions defined by jQuery.
如前所述，在幕后应用 CSS 样式会给禁用脚本的用户带来麻烦。解决这个问题的一种方法是像 Anne 所说的那样声明你的元素是隐藏的，或者在你的脚本中定义你的 CSS 作为一个要改变的函数，而不是作为页面的样式（保持结构、样式和函数分开），然后使用 toggleClass脚本的函数或jQuery定义的自定义效果隐藏函数。
