我可能很蠢,但你怎样才能让jQuery UI的手风琴控件中保持多个部分打开?所有演示都只有一个打开...我正在寻找一种可折叠的菜单类型系统。
我可能很蠢,但你怎样才能让jQuery UI的手风琴控件中保持多个部分打开?所有演示都只有一个打开...我正在寻找一种可折叠的菜单类型系统。
只需将手风琴的每个部分称为自己的手风琴。active: n对于第一个手风琴将为0(因此它将显示),对于其余的手风琴将为1、2、3、4等。由于每个手风琴都是独立的,它们都只有1个部分,并且其余部分将折叠起来以开始。
$('.accordian').each(function(n, el) {
$(el).accordion({
heightStyle: 'content',
collapsible: true,
active: n
});
});
<div class="section">
<div class="section-title">
Section 1
</div>
<div class="section-content">
Section 1 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>
</div>
<div class="section">
<div class="section-title">
Section 2
</div>
<div class="section-content">
Section 2 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>
</div>
And js
$( ".section-title" ).click(function() {
$(this).parent().find( ".section-content" ).slideToggle();
});
打开jquery-ui-*.js文件
查找$.widget("ui.accordion",{
在其中找到_eventHandler:function(event){
进行更改
var options = this.options, active = this.active, clicked = $( event.currentTarget ), clickedIsActive = clicked[ 0 ] === active[ 0 ], collapsing = clickedIsActive && options.collapsible, toShow = collapsing ? $() : clicked.next(), toHide = active.next(), eventData = {
oldHeader: active,
oldPanel: toHide,
newHeader: collapsing ? $() : clicked,
newPanel: toShow };
到
var options = this.options,
clicked = $( event.currentTarget),
clickedIsActive = clicked.next().attr('aria-expanded') == 'true',
collapsing = clickedIsActive && options.collapsible;
if (clickedIsActive == true) {
var toShow = $();
var toHide = clicked.next();
} else {
var toShow = clicked.next();
var toHide = $();
}
eventData = {
oldHeader: $(),
oldPanel: toHide,
newHeader: clicked,
newPanel: toShow
};
在执行之前,先移除 active.removeClass( "ui-accordion-header-active ui-state-active" );
添加 if (typeof(active) !== 'undefined') {
和闭合标签 }
享受吧
我知道这个问题特别要求使用jQuery UI。
我经常会探索jQuery UI手风琴,然后记得我可以使用本地DETAILS和SUMMARY元素(除了IE11)来实现基本相同类型的功能:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
只是提醒一下,以防您像我一样经常忘记。