Foundation 6 Multiple Accordions, как одновременно расширить только один аккордеон

Я использую функцию Accordion в Foundation 6 и имею три отдельных аккордеона на одной странице. По умолчанию в одном аккордеоне одновременно может быть развернуто только одно содержимое. Однако я хочу, чтобы одновременно для всех аккордеонов на всей странице открывался только один контент.

Я почти уверен, что смогу сделать это, используя их методы, особенно метод «Вверх», однако я не могу найти никаких рабочих примеров, а их документация довольно скудна. Это все, что они предоставляют:

up

$('#element').foundation('up', $target);

Closes the tab defined by $target.

http://foundation.zurb.com/sites/docs/accordion.html

Я не совсем уверен, куда идти отсюда. Пока это то, что у меня есть:

JS:

$(".accordion-title").click(function(e) {
  //Not sure what to do with this 
  $('#element').foundation('up', $target);
});

ХАМЛ:

  %ul.accordion#accordion-1{:'data-accordion' => "", :'data-allow-all-closed' => "true"}
      %li.accordion-item
        %a.accordion-title
          Title 1
        .accordion-content{:'data-tab-content' => ""}
          Content 1
      %li.accordion-item
        %a.accordion-title
          Title 2
        .accordion-content{:'data-tab-content' => ""}
          Content 2

  %ul.accordion#accordion-2{:'data-accordion' => "", :'data-allow-all-closed' => "true"}
      %li.accordion-item
        %a.accordion-title
          Title 1
        .accordion-content{:'data-tab-content' => ""}
          Content 1
      %li.accordion-item
        %a.accordion-title
          Title 2
        .accordion-content{:'data-tab-content' => ""}
          Content 2

  %ul.accordion#accordion-3{:'data-accordion' => "", :'data-allow-all-closed' => "true"}
      %li.accordion-item
        %a.accordion-title
          Title 1
        .accordion-content{:'data-tab-content' => ""}
          Content 1
      %li.accordion-item
        %a.accordion-title
          Title 2
        .accordion-content{:'data-tab-content' => ""}
          Content 2

accordion zurb-foundation zurb-foundation-6
person alexandraleigh    schedule 29.02.2016    source источник
comment
Вы инициализируете каждый аккордеон по отдельности или все сразу?   -  person Yass    schedule 01.03.2016
comment
@Yass Я верю во все сразу.   -  person alexandraleigh    schedule 01.03.2016

Ответы (4)


arrow_upward
1
arrow_downward

Я не мог заставить ответ Александроли работать, он также закрывал аккордеон, который я только что щелкнул, чтобы открыть.

Вот что я написал в итоге. Он работает с набором аккордеонов с data-multi-expand="true" или data-multi-expand="false".

 /**
 * on accordion section click
 */
$('.accordion-title').on('mouseup', function (e) {

    var $accordionItem = $(this).parent(),
            //is the section hidden? if the section is not yet visible, the click is to open it
            opening = ($accordionItem.find('.accordion-content:hidden').length === 1);
    //
    if (opening) {
        //the accordion that has just been clicked
        var $currentAccordion = $accordionItem.parent();

        //close all other accodions
        $('.accordion').each(function () {
            var $acc = $(this);

            //ignore the accordion that was just clicked
            if ($acc[0] !== $currentAccordion[0]) {
                //find any open sections
                var $openSections = $acc.find('.accordion-item.is-active .accordion-content');
                //
                $openSections.each(function (i, section) {
                    //close them
                    $acc.foundation('up', $(section));
                });
            }
        });
    }
});
person r8n5n    schedule 10.03.2016

arrow_upward
4
arrow_downward

Я нашел решение своего вопроса на случай, если кто-то еще застрял:

$(".accordion-title").click(function(e) {
  $('.accordion').foundation('up', $('.accordion .accordion-item.is-active .accordion-content'));
});
person alexandraleigh    schedule 01.03.2016

arrow_upward
1
arrow_downward

Я не мог заставить ответ r8n5n работать - возможно, из-за обновлений Foundation с тех пор. Но мне удалось заставить его работать со следующим на v6.3.0..

jQuery('.accordion-title').on('mouseup', function (e) {

    jQuery('.accordion').each(function () {

        jQuery(this).foundation('up', jQuery('.accordion-content'));

    });     
});
person Marc Salmon    schedule 01.02.2017

arrow_upward
0
arrow_downward

У меня были мысли о предыдущих ответах

если у вас есть 2 аккордеона, просто добавьте к ним имя класса. Например, class="аккордеон-аккордеон-первый" и class="аккордеон-аккордеон-второй".

//close active item on second accordion when click on first accordion
$(".accordion-first .accordion-title").click(function(e) {
  $('.accordion').foundation('up', $('.accordion-second .accordion-item.is-active .accordion-content'));
});

//close active item on first accordion when click on second accordion
$(".accordion-second .accordion-title").click(function(e) {
  $('.accordion').foundation('up', $('.accordion-first .accordion-item.is-active .accordion-content'));
});
person user2791423    schedule 27.04.2020