プロジェクトでjQuery UI アコーディオン(一度に複数のアイテムを開くことはできません) を使用しています。一度に1 つのパネルしか開きたくないので、アコーディオンを使用するのが適切です。
ただし、クリックすると「すべて折りたたむ」に切り替わる「すべて展開」リンクを提供する必要があります。この 1 つの要件に関して、ほぼ同一のアコーディオン機能をカスタムで記述したくないので、アコーディオン コンポーネントを使用したままこれを実現する JS が必要です。
質問: jQuery UI の「アコーディオン」コンポーネントを使用して標準機能を強化しながら、これを実現するには、どの JavaScript/jQuery が必要ですか?
ここにフィドルがあります：http://jsfiddle.net/alecrust/a6Cu7/
jQuery UI フォーラムで議論されているように、これにはアコーディオンを使用しないでください。
アコーディオンのように見えて機能するものが必要な場合は、それで問題ありません。それらのクラスを使用してスタイルを設定し、必要な機能を実装します。次に、それらをすべて開いたり閉じたりするボタンを追加するのは非常に簡単です。例
HTML
jquery-ui クラスを使用することで、アコーディオンを「本物の」アコーディオンのように見せることができます。
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
<h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
Section 1
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
Content 1
</div>
</div>
自分のアコーディオンを巻く
ほとんどの場合、アコーディオン ヘッダーで次の兄弟 (コンテンツ領域) の状態を切り替えたいだけです。また、後でフックする 2 つのカスタム イベント "show" と "hide" を追加しました。
var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
var expandLink = $('.accordion-expand-all');
headers.click(function() {
var panel = $(this).next();
var isOpen = panel.is(':visible');
// open or close as necessary
panel[isOpen? 'slideUp': 'slideDown']()
// trigger the correct custom event
.trigger(isOpen? 'hide': 'show');
// stop the link from causing a pagescroll
return false;
});
すべて展開/折りたたむ
ボタンが変更されたことをマークするためにブール値isAllOpenフラグを使用します。これは、より大きなプラグイン フレームワークのクラスまたは状態変数である可能性があります。
expandLink.click(function(){
var isAllOpen = $(this).data('isAllOpen');
contentAreas[isAllOpen? 'hide': 'show']()
.trigger(isAllOpen? 'hide': 'show');
});
「全開」時にボタンを入れ替える
カスタムの「表示」および「非表示」イベントのおかげで、パネルが変更されたときに何かをリッスンできます。唯一の特別なケースは「すべて開いているか」です。はいの場合、ボタンは「すべて折りたたむ」にする必要があります。そうでない場合は、「すべて展開する」にする必要があります。
contentAreas.on({
// whenever we open a panel, check to see if they're all open
// if all open, swap the button to collapser
show: function(){
var isAllOpen = !contentAreas.is(':hidden');
if(isAllOpen){
expandLink.text('Collapse All')
.data('isAllOpen', true);
}
},
// whenever we close a panel, check to see if they're all open
// if not all open, swap the button to expander
hide: function(){
var isAllOpen = !contentAreas.is(':hidden');
if(!isAllOpen){
expandLink.text('Expand all')
.data('isAllOpen', false);
}
}
});
コメントの編集： 「すべて展開」ボタンを押さない限り、「1つのパネルのみを開く」を維持する方が実際にははるかに簡単です。例
最終的に、要件を考慮すると、これが最良のソリューションであることがわかりました。
// Expand/Collapse all
$('.accordion-expand-collapse a').click(function() {
$('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle();
$(this).text($(this).text() == 'Expand all' ? 'Collapse all' : 'Expand all');
$(this).toggleClass('collapse');
return false;
});
更新された JSFiddle リンク: http://jsfiddle.net/ccollins1544/r8j105de/4/
アコーディオンでこれを行うことができるとは思えません。アコーディオンは、最大で 1 つのアイテムが開かれるという特性を維持するように特別に設計されているためです。ただし、アコーディオンを再実装したくないと言っても、関連する複雑さを過大評価している可能性があります。
要素の垂直スタックがある次のシナリオを考えてみましょう。
++++++++++++++++++++
+ Header 1 +
++++++++++++++++++++
+ +
+ Item 1 +
+ +
++++++++++++++++++++
+ Header 2 +
++++++++++++++++++++
+ +
+ Item 2 +
+ +
++++++++++++++++++++
あなたが怠け者なら、テーブルを使ってこれを構築することができます。そうでなければ、適切にスタイルされた DIV も機能します。
アイテム ブロックのそれぞれは、 のクラスを持つことができますitemBlock。ヘッダーをクリックすると、クラス itemBlock のすべての要素が非表示になります ( $(".itemBlock").hide())。その後、jqueryslideDown()関数を使用して、ヘッダーの下の項目を展開できます。これで、アコーディオンをほぼ実装しました。
すべての項目を展開するには、$(".itemBlock").show()または を使用して、アニメーション化したい場合は$(".itemBlock").slideDown(500). すべてのアイテムを非表示にするには、 を使用します$(".itemBlock").hide()。
先ほど bigvax の 2 番目のコメントを書きましたが、追加することを確認する必要があります。
jQuery("#jQueryUIAccordion").({ active: false,
collapsible: true });
そうしないと、折りたたんだ後に最初のアコーディオンを開くことができなくなります。
$('.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 .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
$('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
}
jQuery プラグインに変換されたSinethetaによるコードを次に示します。以下のコードを js ファイルに保存します。
$.fn.collapsible = function() {
$(this).addClass("ui-accordion ui-widget ui-helper-reset");
var headers = $(this).children("h3");
headers.addClass("accordion-header ui-accordion-header ui-helper-reset ui-state-active ui-accordion-icons ui-corner-all");
headers.append('<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">');
headers.click(function() {
var header = $(this);
var panel = $(this).next();
var isOpen = panel.is(":visible");
if(isOpen) {
panel.slideUp("fast", function() {
panel.hide();
header.removeClass("ui-state-active")
.addClass("ui-state-default")
.children("span").removeClass("ui-icon-triangle-1-s")
.addClass("ui-icon-triangle-1-e");
});
}
else {
panel.slideDown("fast", function() {
panel.show();
header.removeClass("ui-state-default")
.addClass("ui-state-active")
.children("span").removeClass("ui-icon-triangle-1-e")
.addClass("ui-icon-triangle-1-s");
});
}
});
};
UI ページでそれを参照し、jQuery アコーディオン呼び出しのように呼び出します。
$("#accordion").collapsible();
見た目がすっきりし、クラスがマークアップに追加されるのを回避できます。
これを試してみてくださいjquery-multi-open-accordion、あなたを助けるかもしれません
Yes, it is possible. Put all div in separate accordion class as follows:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("input[type=submit], button")
.button()
.click(function (event) {
event.preventDefault();
});
$("#tabs").tabs();
$(".accordion").accordion({
heightStyle: "content",
collapsible: true,
active: 0
});
});
function expandAll()
{
$(".accordion").accordion({
heightStyle: "content",
collapsible: true,
active: 0
});
return false;
}
function collapseAll()
{
$(".accordion").accordion({
heightStyle: "content",
collapsible: true,
active: false
});
return false;
}
</script>
<div class="accordion">
<h3>Toggle 1</h3>
<div >
<p>text1.</p>
</div>
</div>
<div class="accordion">
<h3>Toggle 2</h3>
<div >
<p>text2.</p>
</div>
</div>
<div class="accordion">
<h3>Toggle 3</h3>
<div >
<p>text3.</p>
</div>
</div>
この軽量で小さなプラグインを試すことができます。
要件に応じてカスタマイズできるようになります。展開/折りたたみ機能があります。