11
アコーディオンを作成しようとしていますが、ここで1回のクリックですべてのセクションを展開/折りたたむことができます。私はまた、ユーザーが一度に0-nセクションを開いているセクションを開いたり閉じたりできるようにする必要があります。ここでstackoverflowとjqueryフォーラムでの議論のいくつかを使用して、私が思い付いた解決策は次のとおりです。 各セクションは独自のaccordionとして実装されています。各セクションは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-状態フォーカス」クラスを持っていますページの他の場所をクリックしてください。だから私が見ているのは、ちょうど閉じられたセクションのヘッダーが、私が他の場所をクリックするまで、ホバー効果と同じ背景色を持ち、「デフォルトの、焦点が合っていない」色に移動するということです。
また、[すべて折りたたむ]リンクを使用すると、すべてFirefoxでうまく表示されます。 IEでは、最後のセクションヘッダーに同じホバーフォーカスの色付けがあります。
提案がありますか？閉じたときにアコーディオンがフォーカスを失うように強制する必要がありますか？どうすればそれを達成できますか？
これは、1つのアコーディオンのためのソリューションではありません。サンプルでは、複数のアコーディオンが使用されています。 – jmav