logo标签列表

jQuery UI手风琴如何保持多个部分展开？

javascriptjqueryhtmljquery-ui
100

我可能很蠢，但你怎样才能让jQuery UI的手风琴控件中保持多个部分打开？所有演示都只有一个打开...我正在寻找一种可折叠的菜单类型系统。

18
请看这个链接：http://jsfiddle.net/DkHyd/ - supersuphot
你的插件真是太完美了！非常感谢，伙计！ - SexyBeast
14个回答
2

只需将手风琴的每个部分称为自己的手风琴。active: n对于第一个手风琴将为0（因此它将显示），对于其余的手风琴将为1、2、3、4等。由于每个手风琴都是独立的，它们都只有1个部分，并且其余部分将折叠起来以开始。

$('.accordian').each(function(n, el) {
  $(el).accordion({
    heightStyle: 'content',
    collapsible: true,
    active: n
  });
});
请注意，这已经在2upmedia的下面的答案中提出建议。 - Boaz
2
没有jQuery-UI手风琴，我们可以简单地这样做：
<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();
});

https://jsfiddle.net/gayan_dasanayake/6ogxL7nm/

0

打开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') { 和闭合标签 }

享受吧

0

我知道这个问题特别要求使用jQuery UI。

我经常会探索jQuery UI手风琴，然后记得我可以使用本地DETAILS和SUMMARY元素（除了IE11）来实现基本相同类型的功能：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

只是提醒一下，以防您像我一样经常忘记。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接