jQuery - jeasyui手风琴全部崩溃

jQuery - jeasyui accordion all collapse

我用的是jeasyui手风琴

但是默认情况下,它始终显示第一个手风琴处于打开状态。我想看看是否可以在页面加载时以折叠状态显示所有手风琴。

这是我在文档中提到的 link。 http://www.jeasyui.com/documentation/accordion.php

我的代码:

<div id="someid" class="easyui-accordion" data-options="multiple:true" >

        <div title="About Accordion" 
            style="overflow: auto; padding: 10px;" >
            <h3 style="color: #0099FF;">Accordion for jQuery</h3>
            <p>Accordion is a part of easyui framework for jQuery. It lets
                you define your accordion component on web page more easily.</p>
        </div>

        <div title="About easyui" data-options="selected:true" style="padding: 10px;">easyui help you build your web page easily</div>

        <div title="Tree Menu">another set of information</div>

    </div>

最终解决方案:

我在 javascript 函数中添加了以下代码来折叠面板。

  $(document).ready(function() {
    var panels = $('.easyui-accordion').accordion('panels');
    $.each(panels, function(){
        this.panel('collapse');
    });
    });

通过查看您提供的文档,您需要将所选 属性 设置为 false much link 示例

<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">

data-options="selected:false" // this is what you need in your first div

将以上内容放在您的第一个 div 中。你还没有提供你的代码,我瞎了眼

干杯

特鲁兹

你可以做的是,在加载时,获取所有手风琴面板并在每个面板上调用 collapse 方法来折叠它们:

$(document).ready(function() {
    var panels = $('#aa').accordion('panels');
    $.each(panels, function() {
        this.panel('collapse');
    });
});

在它的文档 here 中,在 容器选项 中,您可以使用选项 selected,我试图将它的值设置为 -1 并且有效,就像这样:

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" data-options="
                selected:-1" >
    <div title="Title1"  style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery. 
        It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="Title2" data-options="iconCls:'icon-reload'" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>
</div>

Jsbin Example