jQuery - jeasyui 手风琴全部崩溃答案

【问题标题】：jQuery - jeasyui accordion all collapsejQuery - jeasyui 手风琴全部崩溃
【发布时间】：2015-10-18 23:46:48
【问题描述】：

我正在使用 jeasyui 手风琴。

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

这是我为文档引用的链接。 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');
    });
    });

【问题讨论】：

@BishopBarber 该解决方案适用于 jQuery Accordion。我正在使用不同的库。
我很抱歉，你是对的。

标签： jquery accordion jquery-easyui

【解决方案1】：

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

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

【讨论】：

@E2241 不客气！不要忘记接受答案，以便未来的读者可以轻松找到解决方案。
我试图接受答案，但是 1) jsfiddle 代码不起作用，因为它没有让您有机会导入 jquery easy ui 库 js 框架。它让所有其他人都在那里。 2）您发送的代码主要来自我在本网站上看到的另一个链接。 3）代码还不完整，需要有document.ready功能。因此，我将解决方案放在我的问题本身中。
@E2241 我真的不介意你不接受答案，因为现在它在页面顶部，未来的读者会首先找到它。不过我不同意你的看法。 1）就我而言，jsfiddle确实有效。不，你不能轻易导入 jquery easy ui 库 js 框架，因为没有可用的 cdn 版本。我能做的最好的就是在 orionhub 上托管它。 2) 我提出的代码确实受到this answer 的启发。但是，未来的用户会在 StackOverflow 上更轻松地找到它。
@E2241 3) 在答案中省略 document.ready 不会使其不完整。这是暗示的。此外，在我的 jsfiddle 中，你有它。 4）您在问题中提出的答案与我在 jsfiddle 中的答案完全相同，所以我不明白您的逻辑。无论如何，我很高兴你解决了你的问题，祝你有美好的一天！
我不是想冒犯你。我不接受答案的唯一原因是它不会解决问题。但是，我会接受您确实为我指明了正确方向的事实。很抱歉，如果没有简单的 ui 库 js，JsFiddle 将无法工作。因此，您发布的链接基本上没有用，这让我在选择一个基本上不起作用的答案时犹豫不决。

【解决方案2】：

通过查看您提供的文档，您需要将 selected 属性设置为 false 多链接示例

<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 中。你没有提供代码，我瞎了眼

干杯

真人

【讨论】：

我已经尝试过使用它。它不会折叠第一个 div。但是，当我为其他 div 将其设置为 true 时，它显示为打开手风琴。

【解决方案3】：

在它的文档here，在Container Options中，您可以使用选项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

【讨论】：