代码之家 › 专栏 › 技术社区 › GetGalax

手风琴-如何不展开第一个项目?

jquery-ui-accordion jquery javascript

GetGalax · 技术社区 · 10 年前

我正在开发一个基于此的Accordion“功能”网站: http://jqueryui.com/accordion/#collapsible

我唯一的问题是,默认情况下第一个分区是打开的,我希望每个分区都关闭,直到访问者按下它们。

有人知道如何解决这个问题吗?

代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true
});
});
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p><img src="https://placekitten.com/g/200/300"></p>
</div>
<h3>Section 2</h3>
<div>
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
</div>
<h3>Section 3</h3>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
</div>
</body>
</html>

4 回复 | 直到 10 年前

antyrat Andy 10 年前

你应该设置 active 选项 false :

$( "#accordion" ).accordion({
  collapsible: true,
  active: false
});

Rory McCrossan Hsm Sharique Hasan 10 年前

初始化 accordion 设置 active 属性到 false 。这将关闭所有面板:

$('#accordion').accordion({
    collapsible: true,
    active: false
});

void 10 年前

$("#accordion").accordion({ 
         collapsible: true, 
         active: false 
});

active:false 将使手风琴关闭

其他读者注意:您需要 "collapsible: true" 制作 "active: false" 工作

Timotheus0106 10 年前

如果你能读到 the api 在询问之前

$( "#accordion" ).accordion({
    collapsible: true,
    active: false
});

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前