JQuery UI Аккордеон Развернуть / Свернуть все

м, используяJQuery UI Аккордеон (который делаетне разрешать открывать более одного элемента одновременно) на проекте. Использование аккордеона уместно, так как я обычноделать только одна панель должна быть открыта одновременно.

Тем не менее, мне нужно предложитьРасширить все" ссылка, которая переключается на "Свернуть все" при нажатии. Я неЯ не хочу писать почти идентичные функции аккордеона в соответствии с этим одним требованием, поэтому яМне бы хотелось, чтобы JS достиг этого, сохранив при этом компонент Accordion.

Вопрос: Какой JavaScript / jQuery требуется для достижения этой цели, при этом все еще используя пользовательский интерфейс jQuery "Аккордеон» компонент для питания стандартной функциональности?

Вот'скрипка:http://jsfiddle.net/alecrust/a6Cu7/

Ответы на вопрос(12)

 rajesh kakawat16 окт. 2012 г., 12:49
тогда попробуй этоjsfiddle.net/CdWUd
 rajesh kakawat16 окт. 2012 г., 12:33
может попробовать эту скрипкуjsfiddle.net/AR57Y
 AlecRust16 окт. 2012 г., 11:34
Спасибо за это, я попробовал, но, к сожалению,очень устарел с последней библиотекой пользовательского интерфейса jQuery / jQuery и больше не совместим с последними версиями.
 AlecRust16 окт. 2012 г., 12:44
Это прекрасно работает, кроме какt имеет стандартную функциональность аккордеона (одновременно открыта только одна панель). Я'Мне бы хотелось, чтобы он соответствовал аккордеону jQuery UI, но также предлагал кнопку переопределения, чтобы развернуть все панели.
 AlecRust16 окт. 2012 г., 16:57
Опять почти! Аккордеон теперь, кажется, функционирует как обычно, но "Расширить все" ссылка неправильно растянуть все панели, как это делает аккордеон, и нет переключиться на "Свернуть все" при нажатии.
Решение Вопроса

// Expand/Collapse all
$('.accordion-expand-collapse a').click(function() {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle();
    $(this).text($(this).text() == 'Expand all' ? 'Collapse all' : 'Expand all');
    $(this).toggleClass('collapse');
    return false;
});

Обновленная ссылка JSFiddle:http://jsfiddle.net/ccollins1544/r8j105de/4/

 Developer23 июн. 2015 г., 14:17
Что если есть вложенный аккордеон? Будет ли этот код работать?
 Phung D. An13 нояб. 2014 г., 10:45
Скопируйте это и запустите вашу скриптовую ссылку, не работает ... Вот код, который работает с вашей скриптовой ссылкой `$ ('.accordion-expand-all a ') .click (function () {$ ('#accordion .ui-accordion-header: not (.ui-state-active) '.) .Next () slideToggle (); $ (this) .text ($ (this) .text () == 'Расширить все' ? 'Свернуть все' : 'Расширить все'); $ (Это) .toggleClass (»коллапс»); вернуть ложь; }); `

Это позволит вам настроить его согласно вашему требованию. Он будет иметь функции Развернуть / Свернуть.

URL: http://accordion-cd.blogspot.com/

что ты можешь сделать это с аккордеоном, так какСпециально разработанные сохранить свойство, что будет открыт не более одного элемента. Однако, даже если вы говорите, что неЕсли вы хотите повторно реализовать аккордеон, возможно, вы переоцениваете сложность.

Рассмотрим следующий сценарий, где у вас есть вертикальный стек элементов,

++++++++++++++++++++
+     Header 1     +
++++++++++++++++++++
+                  +
+      Item 1      +
+                  +
++++++++++++++++++++
+     Header 2     +
++++++++++++++++++++
+                  +
+      Item 2      +
+                  +
++++++++++++++++++++

Если ты'ленивый, вы могли бы построить это, используя таблицу, иначе, DIVs с соответствующим стилем также будут работать.

Каждый из блоков предметов может иметь классitemBlock, Нажатие на заголовок приведет к тому, что все элементы класса itemBlock будут скрыты ($(".itemBlock").hide()). Затем вы можете использовать JQueryslideDown() функция, чтобы развернуть элемент под заголовком. Теперь ваша очередь'Мы в значительной степени реализовали баян.

Чтобы развернуть все предметы, просто используйте$(".itemBlock").show() или если вы хотите анимировать,$(".itemBlock").slideDown(500), Чтобы скрыть все предметы, просто используйте.$(".itemBlock").hide()

 AlecRust16 окт. 2012 г., 11:43
Мне кажется странным, что весь виджет нужно разветвить. Я'Мне понравились все существующие функциональные возможности jQuery UI Accordion (каждая его часть, включая только одну панель, открытую одновременно), но возможность расширять все панели с помощью кнопки. Возможно, это просто вопрос полного отключения виджета «Гармошка», чтобы все элементы были свернуты?
 Sinetheta16 окт. 2012 г., 19:08
Извините, я неправильно понял ваш вопрос, так какРасширить все" является взаимоисключающимтолько 1 открыт ", Я исправил свой ответ на примере, так кактолько 1 открыт, если не нажмете развернуть все " на самом деле гораздо проще для кода.
 AlecRust11 окт. 2012 г., 17:57
Спасибо, я вполне могу пойти на это, если ничего не поможет. Все еще сохраняя надежду на функцию, которая может быть добавлена вместе со стандартным Аккордеоном :)
 Sinetheta15 окт. 2012 г., 22:25
К сожалениютолько 1 открыт " функциональностьфундаментальный к JQuery UI аккордеонам, и не могбыть удаленным без перезаписи_create, что на самом деле означает разветвление виджета. Я'Мы добавили ответ со всем, что у вас есть.

но вы должны убедиться, что вы добавляете

        jQuery("#jQueryUIAccordion").({ active: false,
                              collapsible: true });

в противном случае вы не сможете открыть первый аккордеон после того, как сложите их.

    $('.close').click(function () {
    $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
    $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
    $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
   }
Yes, it is possible. Put all div in separate accordion class as follows:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>

<script type="text/javascript">

        $(function () {
            $("input[type=submit], button")
        .button()
        .click(function (event) {
            event.preventDefault();
        });
            $("#tabs").tabs();
            $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: 0



            });
        });

function expandAll()
{
  $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: 0

            });

            return false;   
}

function collapseAll()
{
  $(".accordion").accordion({
                heightStyle: "content",

                collapsible: true,
                active: false



            });
            return false;
}
</script>



<div class="accordion">
  <h3>Toggle 1</h3>
  <div>
    <p></p>
  </div>
</div>
<div class="accordion">
  <h3>Toggle 2</h3>
  <div>
    <p>text2.</p>
  </div>
</div>
<div class="accordion">
  <h3>Toggle 3</h3>
  <div>
    <p>text3.</p>
  </div>
</div>

я изменил, чтобы позволить развернуть и свернуть.

... // подключаем, разворачиваем / разворачиваем все

var expandLink = $('.accordion-expand-all');

expandLink.click(function () {

$(".ui-accordion-content").toggle();
});
 user407404121 апр. 2017 г., 07:56
неясное решение

Вот'с помощью кодаSinetheta преобразован в плагин jQuery: сохранить приведенный ниже код в файл js.

$.fn.collapsible = function() {
    $(this).addClass("ui-accordion ui-widget ui-helper-reset");
    var headers = $(this).children("h3");
    headers.addClass("accordion-header ui-accordion-header ui-helper-reset ui-state-active ui-accordion-icons ui-corner-all");
    headers.append('<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">');
    headers.click(function() {
        var header = $(this);
        var panel = $(this).next();
        var isOpen = panel.is(":visible");
        if(isOpen)  {
            panel.slideUp("fast", function() {
                panel.hide();
                header.removeClass("ui-state-active")
                    .addClass("ui-state-default")
                    .children("span").removeClass("ui-icon-triangle-1-s")
                        .addClass("ui-icon-triangle-1-e");
          });
        }
        else {
            panel.slideDown("fast", function() {
                panel.show();
                header.removeClass("ui-state-default")
                    .addClass("ui-state-active")
                    .children("span").removeClass("ui-icon-triangle-1-e")
                        .addClass("ui-icon-triangle-1-s");
          });
        }
    });
}; 
</span>

Ссылайтесь на свою страницу пользовательского интерфейса и вызывайте аналогично вызову jQuery accordian:

$("#accordion").collapsible(); 

Выглядит чище и избегает добавления классов в разметку.

Работаю в реальном проекте.

   $(function () {
    $("#accordion").accordion({collapsible:true, active:false});
    $('.open').click(function () {
        $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({'aria-selected':'true','tabindex':'0'});
        $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
        $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({'aria-expanded':'true','aria-hidden':'false'}).show();
        $(this).hide();
        $('.close').show();
    });
    $('.close').click(function () {
        $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});
        $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
        $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide();
        $(this).hide();
        $('.open').show();
    });
    $('.ui-accordion-header').click(function () {
        $('.open').show();
        $('.close').show();
    });
});

http://jsfiddle.net/bigvax/hEApL/

 Developer22 июн. 2015 г., 20:04
Это правильный ответ. Спасибо!
 DontFretBrett09 февр. 2015 г., 23:54
У меня была такая же проблема, как у @jeewan
 Leo Leoncio10 июн. 2016 г., 19:49
тоже самое. почему-то не закрывается при первом клике.
 jeewan18 июн. 2013 г., 19:15
Привет bigvax, ссылка на jsfiddle отличная, но у меня есть несколько проблем с этим: вот сценарий: 1) нажмите "секция 1" чтобы открыть это. 2) нажмите "Свернуть все" Кнопка, чтобы закрыть ранее открытый раздел. 3) Теперь нажмите еще разсекция 1", он не открывается при первом нажатии, вы должны нажать на него "дважды", Я пытался решить это, но не смог. Подскажите, пожалуйста, как я могу решить эту проблему?

Это решение весьма полезно, но я добавляю кое-что для решения одной проблемы: когда вы нажимаете на один аккордеон, чтобы развернуть его, а затем нажимаете на кнопку, чтобы развернуться, все они будут открыты. Но, если вы снова нажмете на кнопку, чтобы свернуть, один аккордеон раскроется раньше, чем выиграетне быть крахом. Я

Мы использовали imageButton, но вы также можете применить эту логику к кнопкам.

/*** Expand all ***/
$(".expandAll").click(function (event) {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideDown();

    return false;
});

/*** Collapse all ***/
$(".collapseAll").click(function (event) {
    $('.accordion').accordion({
        collapsible: true,
        active: false
    });

    $('.accordion .ui-accordion-header').next().slideUp();

    return false;
});

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

/*** Expand all Second Level ***/
$(".expandAll").click(function (event) {
    $('.accordion .ui-accordion-header:not(.ui-state-active)').nextAll(':has(.accordion .ui-accordion-header)').slideDown();

    return false;
});

чего хотел, только с помощью следующего:

$(".ui-accordion-content").show();

JSFiddle

 L Riley05 нояб. 2018 г., 18:00
Это должен быть принятый ответ ...
 George Jempty27 дек. 2015 г., 15:13
Ты избил меня до удара. Я случайно обнаружил это сам.
 ionize10 сент. 2016 г., 00:43
Мне нравится ваше решение, спасибо, что поделились.
 Carel14 нояб. 2016 г., 13:30
$ (».ui-гармошка содержание») .SlideDown (300);
 Joe Johnston07 нояб. 2018 г., 16:04
$ (».ui-гармошка содержание») .Toggle (); // позволяет показать / скрыть поведение. Единственным недостатком является то, что любые открытия будут закрыты, и наоборот.

Как обсуждалось на форумах jQuery UI вы не должны использовать аккордеоны для этого.

Если вы хотите что-то, что выглядит и действует как аккордеон, это нормально. Используйте их классы, чтобы стилизовать их и реализовать любую функциональность, которая вам нужна. Затем добавить кнопку, чтобы открыть или закрыть их все довольно просто.пример

HTML

Используя классы jquery-ui, мы сохраняем наши аккордеоны похожими на "реальный» аккордеоны.

<div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
    <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
        <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
        Section 1
    </h3>
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        Content 1
    </div>
</div>​

Сверните свои аккордеоны

В основном мы просто хотим, чтобы заголовки аккордеона переключали состояние следующего брата, вот оно чтообласть содержимого. Мы также добавили два пользовательских события "шоу" а также "скрывать" который мы подключим позже.

var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
var expandLink = $('.accordion-expand-all');

headers.click(function() {
    var panel = $(this).next();
    var isOpen = panel.is(':visible');

    // open or close as necessary
    panel[isOpen? 'slideUp': 'slideDown']()
        // trigger the correct custom event
        .trigger(isOpen? 'hide': 'show');

    // stop the link from causing a pagescroll
    return false;
});

Развернуть / Свернуть все

Мы используем логическое значениеisAllOpen флаг, чтобы пометить, когда кнопка была изменена, это может быть просто класс или переменная состояния в более крупной платформе плагина.

expandLink.click(function(){
    var isAllOpen = $(this).data('isAllOpen');

    contentAreas[isAllOpen? 'hide': 'show']()
        .trigger(isAllOpen? 'hide': 'show');
});

Поменяйте кнопку когдавсе открыто

Благодаря нашему обычаюшоу" а также "скрывать" события, у нас есть что послушать, когда панели меняются. Единственный особый случай "они все открыты?, если да, кнопка должна быть "Свернуть все", если нет, то должно быть "Расширить все".

contentAreas.on({
    // whenever we open a panel, check to see if they're all open
    // if all open, swap the button to collapser
    show: function(){
        var isAllOpen = !contentAreas.is(':hidden');   
        if(isAllOpen){
            expandLink.text('Collapse All')
                .data('isAllOpen', true);
        }
    },
    // whenever we close a panel, check to see if they're all open
    // if not all open, swap the button to expander
    hide: function(){
        var isAllOpen = !contentAreas.is(':hidden');
        if(!isAllOpen){
            expandLink.text('Expand all')
            .data('isAllOpen', false);
        } 
    }
});​

Редактировать для комментария: Поддержание1 панель открыта только если вы не нажметеРасширить все" Кнопка на самом деле намного проще.пример

 Developer22 июн. 2015 г., 19:59
Ваш пример не работает для всех элементов. Просто проверь это.
 AlecRust16 окт. 2012 г., 22:34
Большое спасибо. Было интересно посмотреть, возможно ли это, спасибо за ваши ответы.
 Sinetheta23 июн. 2015 г., 08:57
Спасибо что подметил это. Странно, что он так долго оставался сломанным. Из-запокажи первую гармошку " contentAreas ссылался только на первую область контента, когда нужно было ссылатьсявсе области содержания. Я исправил это, добавив.end() сбросить селектор.
 Sinetheta17 окт. 2012 г., 18:13
добавляя.first().show() до линии, которая изначально скрывает все панели контента. Я обновил последний пример.
 Sinetheta16 окт. 2012 г., 18:56
Является ли это возможным? Простой ответ - нет. Вы можете отредактировать источник во многих отдельных местах, чтобы сделать это так, но это не так.т, этопереписать это. И да, "большой» относительно. Исходный текст JQuery UI содержит 738 строк кода, и этотолько потому, чтоs построен на jquery.ui.core.js и jquery.ui.widget.js
 AlecRust17 окт. 2012 г., 13:37
Последний вопрос: как мне воспроизвести первый открытый элемент, как это делает jQuery UI Accordion по умолчанию?
 DeA02 мая 2017 г., 20:57
Тот'это правда. По умолчанию это поведение, но в этой скрипке это не 'так себя вести
 JoshYates198024 июн. 2015 г., 18:55
Это отличный ответ. Я изменил ваш код, чтобы все панели открывались при загрузке страницы. Хотел бы я купить тебе пиво!
 AlecRust17 окт. 2012 г., 22:06
Это делает панели неразборными. Это'все в порядке, решили сэто гибридное решение.
 Sinetheta17 окт. 2012 г., 23:09
Я рад, что вы нашли решение, которое сработало для вас.
 Sinetheta02 мая 2017 г., 05:22
я не уверен, что понимаю @DeA, это не текущее поведение? Нажмите на любой заголовок, остальные разделы закроются. Разверните все, затем щелкните любой заголовок, все они закроются, но тот, который вы щелкнули, откроется снова.
 DeA03 мая 2017 г., 16:38
@Sinetheta Спасибо большое! Вот это да. Это действительно помогло. Я не ожидал ответа на старый пост. Но спасибо!
 AlecRust16 окт. 2012 г., 11:41
Спасибо за это. Как объяснил, я понимаю, что яне следует использовать для этого гармошку, но мой вопрос:возможный поверх существующего компонента JQuery UI Accordion. Было бы одно, если бы ваше относительно большое количество jQuery создавало идентичный аккордеон для jQuery UI 's (только одна панель открыта за раз и т. д.), но это не так.
 DeA01 мая 2017 г., 20:01
Я знаю, что это действительно старый ответ, но яЯ застрял с этой вещью сейчас и нуждаюсь в помощи. Мне очень нравится твоя скрипка, но есть ли способ убедиться, что когда ты щелкаешь по одному заголовку, другой закрывается?

Ваш ответ на вопрос