jQuery - jeasyui аккордеон все свернуть

Я использую аккордеон 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');
    });
    });

jquery accordion jquery-easyui
person Aman Mohammed    schedule 28.07.2015    source источник
comment
@BishopBarber это решение для jQuery Accordion. Я использую другую библиотеку.   -  person Aman Mohammed    schedule 28.07.2015
comment
Прошу прощения, вы правы.   -  person actaram    schedule 28.07.2015

Ответы (3)


arrow_upward
3
arrow_downward

Что вы можете сделать, так это при загрузке получить все панели аккордеона и вызвать метод collapse для каждой из них, чтобы свернуть их:

$(document).ready(function() {
    var panels = $('#aa').accordion('panels');
    $.each(panels, function() {
        this.panel('collapse');
    });
});
person actaram    schedule 28.07.2015
comment
@ E2241 Добро пожаловать! Не забудьте принять ответ, чтобы будущие читатели могли легко найти решение. - person actaram; 28.07.2015
comment
Однако я пытался принять ответ 1) код jsfiddle не работает, потому что он не дает вам возможности импортировать js-фреймворк jquery easy ui library. Там есть все остальные. 2) отправленный вами код в основном взят по другой ссылке, которую я видел на этом веб-сайте. 3) Код все еще не завершен и должен иметь функцию document.ready. Следовательно, я поставил решение в самом вопросе. - person Aman Mohammed; 28.07.2015
comment
@ E2241 Я действительно не возражаю, если вы не примете ответ, поскольку теперь он находится в верхней части страницы, и будущие читатели первыми его найдут. Однако я не согласен с вами. 1) Насколько я понимаю, jsfiddle действительно работает. Нет, вы не можете легко импортировать js-фреймворк jquery easy ui library, потому что нет доступной версии cdn. Лучшее, что я мог сделать, это разместить его на orionhub. 2) Предложенный мной код действительно был вдохновлен этим ответом . Однако будущим пользователям будет легче найти это на StackOverflow. - person actaram; 28.07.2015
comment
@ E2241 3) Отсутствие документа "уже в ответе" не делает его неполным. Это подразумевается. Кроме того, в моем jsfiddle он у вас есть. 4) Ответ, который вы задали на вопрос, точно такой же, как и в моем jsfiddle, поэтому я не понимаю вашей логики. В любом случае, я рад, что вы решили свою проблему, хорошего дня! - person actaram; 28.07.2015
comment
Я не пытался вас обидеть. Единственная причина, по которой я не принял ответ, заключалась в том, что он не собирался решить проблему. Однако я приму тот факт, что вы указали мне правильное направление. Прошу прощения, но JsFiddle не будет работать без библиотеки easy ui js. Следовательно, эта ссылка, которую вы разместили, в основном бесполезна, и это заставило меня колебаться при выборе ответа, который в основном не работает. - person Aman Mohammed; 28.07.2015
comment
@ E2241 Простите, вы абсолютно правы. Только у меня есть доступ к размещенным файлам. Я пробовал запустить скрипку в режиме инкогнито, но она действительно не работает. Еще раз прошу прощения за свое упрямство, я собираюсь изменить свой ответ и удалить скрипку, так как я не могу размещать файлы. - person actaram; 28.07.2015

arrow_upward
0
arrow_downward

Просматривая предоставленную вами документацию, вам необходимо установить для выбранного свойства значение 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. Я вожу слепой, потому что вы не предоставили свой код

Ваше здоровье

Truez

person Truezplaya    schedule 28.07.2015
comment
Я пробовал использовать это. Он не сворачивает первый div. Однако, когда я устанавливаю его в true для других div, он отображается как открытый аккордеон. - person Aman Mohammed; 28.07.2015

arrow_upward
0
arrow_downward

В его документации здесь, в Параметры контейнера вы можете использовать option 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

person Ala' Alnajjar    schedule 28.07.2015