it-swarm.com.ru

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

Я использую jQuery UI Accordion (который не позволяет открывать более одного элемента за один раз) в проекте. Использование аккордеона уместно, так как я обычно делаю хочу, чтобы только одна панель открывалась за раз.

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

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

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

32
AlecRust

В итоге я обнаружил, что это лучшее решение с учетом требований:

// 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;
});
5
AlecRust

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

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

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>​

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

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

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');
});

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

Благодаря нашим специальным событиям «show» и «hide», нам есть что послушать, когда меняются панели. Единственный особый случай - «все ли они открыты», если да, кнопка должна быть «Свернуть все», если нет - «Развернуть все».

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 панель открыта только», если вы не нажмете кнопку «Развернуть все», на самом деле намного проще. Пример

50
Sinetheta

Это мое решение:

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

   $(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/

18
bigvax

Многие из них кажутся слишком сложными. Я достиг того, чего хотел, только с помощью следующего:

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

JSFiddle

16
Charles Clayton

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

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

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

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

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

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

3
PhilDin

Вот код 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");
          });
        }
    });
}; 

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

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

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

2
Ullas Antony

попробуйте это jquery-multi-open-accordion , может помочь вам

1
rajesh kakawat

Я второй комментарий Bigvax ранее, но вы должны убедиться, что вы добавляете 

        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();
   }
1
craig_nelson

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

Я использовал 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;
});
0
Freelex

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

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

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

expandLink.click(function () {

$(".ui-accordion-content").toggle();
});
0
NCR

Вы можете попробовать этот легкий небольшой плагин.

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

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

0
Dharam Mali
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>text1.</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>
0
Manish Ojha