jqueryuiアコーディオン-複数のアコーディオンがすべて展開/折りたたみ-スタイルの問題
ワンクリックですべてのセクションを展開/折りたたむことができるアコーディオンを作成しようとしています。また、一度に0〜n個のセクションが開いているセクションをユーザーが開いたり閉じたりできる機能も必要です。ここスタックオーバーフローとjqueryフォーラムでのいくつかの議論を使用して、私が思いついた解決策は次のとおりです。各セクションを独自のアコーディオンとして実装し、それぞれを折りたたみ可能= trueに設定しました。
<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-state-focus」クラスが残っていることです。したがって、UIに表示されるのは、閉じたばかりのセクションのヘッダーが、他の場所をクリックするまでホバー効果と同じ背景色になり、「フォーカスされていないデフォルトの」色にシフトすることです。
さらに、[すべて折りたたむ]リンクを使用すると、Firefoxではすべてが見栄えがします。 IEでは、最後のセクションヘッダーに同じホバーフォーカスの色が付いています。
助言がありますか？アコーディオンが閉じているときにフォーカスを失うように強制する必要がありますか？どうすればそれを達成できますか？
ページ上のjquery-uiスタイルをオーバーライドし、アコーディオンjavascriptをハックしてui-state-focusクラスを削除しようとした後、簡単な解決策が明らかになりました。
ページ上の他の場所をクリックすると、ページに期待される動作が表示されるため、blur（）を使用してフォーカスを失いました。
$(document).ready(function() {
// forces lose focus when accordion section closed. IE and FF.
$(".ui-accordion-header").click(function(){
$(this).blur();
});
})
IEのすべての折りたたみの問題を修正するために、collapseAll（）メソッドに1行を追加しました。
function collapseAll() {
alert("calling collapseAll");
$("#accordion1, #accordion2, #accordion3, #accordion4")
.filter(":has(.ui-state-active)")
.accordion("activate", -1);
$(".ui-accordion-header").blur();
}
開いているすべてのパネルでアコーディオンを実装するためのソリューション。パネルは静的であり、閉じることはできません。
アコーディオンウィジェットでアコーディオンdivを初期化しないでください！
$("#accordion").addClass("ui-accordion ui-widget ui-helper-reset")
.find('h3')
.addClass("current ui-accordion-header ui-helper-reset ui-state-active ui-corner-top")
.prepend('<span class="ui-icon ui-icon-triangle-1-s"/>')
.next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active");
これが私の答えです〜その助けを願っています
複数のオープンの場合、既存のjquery UIを使用して、次のようにすることができます。
以下の私のコード：
$( "#accordion" ).accordion({
header: "> div > h3",
autoHeight: false,
collapsible: true,
active: false,
beforeActivate: function(event, ui) {
// The accordion believes a panel is being opened
if (ui.newHeader[0]) {
var currHeader = ui.newHeader;
var currContent = currHeader.next('.ui-accordion-content');
// The accordion believes a panel is being closed
} else {
var currHeader = ui.oldHeader;
var currContent = currHeader.next('.ui-accordion-content');
}
// Since we've changed the default behavior, this detects the actual status
var isPanelSelected = currHeader.attr('aria-selected') == 'true';
// Toggle the panel's header
currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));
// Toggle the panel's icon
currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);
// Toggle the panel's content
currContent.toggleClass('accordion-content-active',!isPanelSelected)
if (isPanelSelected) { currContent.slideUp('fast'); } else { currContent.slideDown('fast'); }
return false; // Cancels the default action
}
});
参照元： 複数のセクションを開いたままにするjQuery UIアコーディオン？
そして関数は崩壊して拡大します
function accordion_expand_all()
{
var sections = $('#accordion').find("h3");
sections.each(function(index, section){
if ($(section).hasClass('ui-state-default') && !$(section).hasClass('accordion-header-active')) {
$(section).click();
}
});
}
function accordion_collapse_all()
{
var sections = $('#accordion').find("h3");
sections.each(function(index, section){
if ($(section).hasClass('ui-state-active')) {
$(section).click();
}
});
}
それでおしまい..