如何折叠手风琴中页面加载时的所有部分， [英] How to collapse all the sections at the pageload in the accordion,
本文介绍了如何折叠手风琴中页面加载时的所有部分，的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在下面的手风琴演示中，我如何折叠页面加载中的所有部分，首先将在第1部分中展开第1部分，请帮助我
In the Below accordion demo how do i collapse all the sections at the pageload,initially section 1 will be expanded at the start ,pls help me out
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.6.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.accordion.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<div class="demo">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>
</p>
</div>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
Optionally, toggle sections open/closed on mouseover.
</p>
<p>
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
usable without JavaScript.
</p>
</div><!-- End demo-description -->
</body>
</html>
推荐答案
( function (){
( " ).accordion(); }); < / 脚本 > < /head > < 正文 > < div =" 演示" < div =" 手风琴" < h3 > < a =" #" > ; 第1部分< /a > ; < /h3 > < div > < p > < /p > < /div > < h3 > < a =" #" > ; 第2节< /a > ; < /h3 > < div > < p > < /p > < /div > < h3 > < a =" #" > ; 第3节< /a > ; < /h3 > < div > < p > < /p > < ul > < li > 列出项目一< /li > < li > 列出第二项< /li > < li > 列出项目三< /li > < /ul > < /div > < h3 > < a =" #" > ; 第4节< /a > ; < /h3 > < div > < p > < /p > < /div > < /div > < /div > <！- 结束演示 < div =" 演示说明" < p > 单击标题可展开/折叠分成逻辑部分的内容，就像选项卡一样. (可选)在鼠标悬停时切换各部分的打开/关闭状态. < /p > < p > 基本的HTML标记是一系列标头(H3标签)和内容div，因此内容是 在没有JavaScript的情况下可用. < /p > < /div > <！- 结束演示说明 < /body > < /html >
( "#accordion" ).accordion(); }); </script> </head> <body> <div class="demo"> <div id="accordion"> <h3><a href="#">Section 1</a></h3> <div> <p> </p> </div> <h3><a href="#">Section 2</a></h3> <div> <p> </p> </div> <h3><a href="#">Section 3</a></h3> <div> <p> </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3><a href="#">Section 4</a></h3> <div> <p> </p> </div> </div> </div><!-- End demo --> <div class="demo-description"> <p> Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover. </p> <p> The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript. </p> </div><!-- End demo-description --> </body> </html>
我们应该使用活动和可折叠选项
we should use the active and collapsible options
<script>
这篇关于如何折叠手风琴中页面加载时的所有部分，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
