11
我試圖創建一個手風琴，我可以通過一次單擊來展開/摺疊所有部分。我還需要用戶能夠打開和關閉一次打開0-n部分的部分。在這裏討論stackoverflow和jQuery論壇中的幾個討論，下面是我提出的解決方案： 我已經實現了每個部分，因爲它是自己的手風琴，每個部分都設置爲collapsible = true。jquery ui accordion - 多個手風琴展開/摺疊所有樣式的問題
<html>
<head>
<title>Accordion Test</title>
<script type="text/javascript" src="../scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../scripts/jquery-ui-1.8.4.custom.min.js"></script>
<link rel="stylesheet" href="../_templates/css/jquery-ui-1.8.6.custom.css" type="text/css" />
<link rel="stylesheet" href="../_templates/css/jquery.ui.accordion.css" type="text/css" />
</head>
<body>
<a onClick="expandAll()">Expand All</a>
<br>
<a onClick="collapseAll()">Collapse All</a>
<div id="accordion1" class="accord">
<h5><a href="#">section 1</a></h5>
<div>
section 1 text
</div>
</div>
<!-- orders section -->
<div id="accordion2" class="accord">
<h5><a href="#">section 2</a></h5>
<div>
section 2 text
</div>
</div>
<!-- section 3 -->
<div id="accordion3" class="accord">
<h5><a href="#">section 3</a></h5>
<div>
section 3 text
</div>
</div>
<!-- section 4 -->
<div id="accordion4">
<h5><a href="#">section 4</a></h5>
<div>
section 4 text
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
$('#accordion1').accordion({
header: 'h5',
collapsible: true,
autoHeight: false
});
});
$(function() {
$('#accordion2').accordion({
header: 'h5',
collapsible: true,
autoHeight: false,
active: false
});
});
$(function() {
$('#accordion3').accordion({
header: 'h5',
collapsible: true,
autoHeight: false,
active: false
});
});
$(function() {
$('#accordion4').accordion({
header: 'h5',
collapsible: true,
autoHeight: false,
active: false
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
})
function expandAll() {
alert("calling expandAll");
$("#accordion1, #accordion2, #accordion3, #accordion4")
.filter(":not(:has(.ui-state-active))")
.accordion("activate", 0);
}
function collapseAll() {
alert("calling collapseAll");
$("#accordion1, #accordion2, #accordion3, #accordion4")
.filter(":has(.ui-state-active)")
.accordion("activate", -1);
}
</script>
我快到的問題是，當我點擊的開口部分的標題中，部分預期倒塌，但頭仍然有「UI狀態爲關注焦點」級，直到我點擊頁面上的其他地方。因此，我在ui中看到的是剛剛關閉的部分的標題與我的懸停效果具有相同的背景顏色，直到我點擊其他位置，並且它轉變爲「默認的，不是焦點」的顏色。
此外，當我使用「全部摺疊」鏈接時，在Firefox中看起來都很棒。在IE中，最後一節標題具有相同的懸停焦點着色。
有什麼建議嗎？當它關閉時，我是否需要強迫手風琴失去焦點？我將如何實現這一目標？
這不是一個手風琴的解決方案。在樣品中使用了多個手風琴。 – jmav 2011-04-12 12:47:30