折叠所有，默认情况下仍然打开第一个手风琴
Collapse all and still have the first accordion opened by default
我正在尝试使用jquery手风琴。我用的是jsfiddle也就是这个问题中的jQuery UI Accordion展开/折叠所有
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kaneka Extranet CustomerDocs</title>
<link href="/Content/screen.css" rel="stylesheet"/>
<link href="/Content/fonts.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/jquery-ui-1.10.4.js"></script>
<script type="text/javascript" src="http://use.typekit.com/omm2ava.js"></script>
<script type="text/javascript"> try { Typekit.load(); } catch (e) { }</script>
</head>
<body class="page">
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$(".accordion").accordion({
collapsible: true,
heightStyle: "content",
active: false
});
var icons = $(".accordion").accordion("option", "icons");
$('.open').click(function () {
$('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
'aria-selected': 'true',
'tabindex': '0'
});
$('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected);
$('.ui-accordion-content').addClass('ui-accordion-content-active').attr({
'aria-expanded': 'true',
'aria-hidden': 'false'
}).show();
$(this).attr("disabled", "disabled");
$('.close').removeAttr("disabled");
});
$('.close').click(function () {
$('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
'aria-selected': 'false',
'tabindex': '-1'
});
$('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
$('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
'aria-expanded': 'false',
'aria-hidden': 'true'
}).hide();
$(this).attr("disabled", "disabled");
$('.open').removeAttr("disabled");
});
$('.ui-accordion-header').click(function () {
$('.open').removeAttr("disabled");
$('.close').removeAttr("disabled");
});
$('h1:eq(0)').trigger('click');
$('h2:eq(0)').trigger('click');
});
</script>
<style type="text/css">
.accordion-expand-holder {
margin: 10px 0;
}
.accordion-expand-holder .open, .accordion-expand-holder .close {
margin: 0 10px 0 0;
}
</style>
<div class="bgborder-top"></div>
<div id="container">
<div id="header">
<a id="kanekalogo" href="/"><img src="/images/logo_kaneka.png" alt="" /></a>
<div id="topnav"></div>
<div id="top">
<div id="breadcrumbs">
<a href="/" title="Home">Home</a>
>
Documents
</div>
</div>
</div>
<div id="leftcontainer">
<a id="clientlogin" href="/Account/Login">Client Login</a>
</div>
<div id="content">
<h1>Documents Overview</h1>
Welcome bschelkens@hotmail.com<br />
<div class="accordion-expand-holder">
<div class="form-row">
<table>
<tr>
<td>
<form action="/Documents" method="post"> <p>
<label for="SearchCriteria">Search</label>
<input id="SearchCriteria" name="SearchCriteria" type="text" value="" />
<input type="image" width="25" src="/Images/search-icon.png" alt="Search documents" title="Search Documents">
</p>
</form> </td>
<td>
<input type="image" width="25" src="/Images/expandAll.png" alt="Expand All" title="Expand All" class="open">
</td>
<td>
<input type="image" width="25" src="/Images/collapseAll.png" alt="Collapse All" title="Collapse All" class="close">
</td>
</tr>
</table>
</div>
</div>
<div class="accordion">
<h1>High Performance Polymers</h1>
<div>
<div class="accordion">
<h1>Safety Data Sheet</h1>
<div>
Here comes text.
</div>
</div>
<div class="accordion">
<h1>Technical Data Sheet</h1>
<div>
Here comes somes other text
</div>
</div>
</div>
</div>
<div class="accordion">
<h1>Eperan</h1>
<div>
<div class="accordion">
<h1>Safety Data Sheet</h1>
<div>
Here comes some ohter text
</div>
</div>
<div class="accordion">
<h1>Technical Data Sheet</h1>
<div>
Some other text.
</div>
</div>
</div>
</div>
</div>
<div class="push"></div>
</div>
<div id="footer" class="bgborder-bottom">
<div id="footer-container"></div>
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"InternetExplorer","requestId":"09c25ea2edd34132bcec5a536592ad9c"}
</script>
<script type="text/javascript" src="http://localhost:6824/5b10ce23a3a348e29f74f46dd49ecc51/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
上面是我的页面看起来像。由于某种原因，当我试着拉小提琴时，它的效果和我预期的一样。但在我的代码中，这不起作用
remove active:false默认打开第一个选项。
看到演示
$("#accordion").accordion({
collapsible:true,
});
第二选项与active:false。在代码末尾触发单击事件。
$('h3:eq(0)').trigger('click');
看到演示
相关文章：
- 使用数据上的角度更改设置集合的第一个元素的动画
- 当单击第一个李时，它显示内容一，当单击第二个李时，它显示内容二
- 字母计数:返回重复字母数最多的第一个单词
- 如何使用Javascript在HTML表中查找第一个空行
- 分页:如何用AJAX加载第一个页面
- 全局标志仅与第一个匹配项匹配的Regexp
- 访问ng repeat中的第一个项目
- 使用jQuery只返回选中复选框后的第一个表单元格值
- 使用jQuery插入HTML页面的第一个项目缺少结束标记
- 关闭第二个事件源上的第一个事件源's onopen方法
- 无法获取vis.js最后一个或第一个选定的网络节点
- 如何设置第一个手风琴面板关闭
- 使用filter和map方法将数组中某些元素的第一个字母大写-JavaScript
- 获得多个手风琴部分以保持开放
- 手风琴-如何不扩大第一个项目
- 第一个手风琴面板打开
- j查询手风琴 |打开页面加载和活动状态混淆的第一个元素
- 如何将活动类添加到第一个手风琴
- 单击列表中的第一个项目时打开手风琴
- 折叠所有，默认情况下仍然打开第一个手风琴
