Foundation 6 Multiple Accordions，如何一次只扩展一个手风琴答案

【问题标题】：Foundation 6 Multiple Accordions, how to have only one accordion expanded at onceFoundation 6 Multiple Accordions，如何一次只扩展一个手风琴
【发布时间】：2016-02-29 19:09:56
【问题描述】：

我正在使用 Foundation 6 的 Accordion 功能，并且在一页上有三个独立的手风琴。默认情况下，在单个手风琴中，一次只能展开一个内容。但是，我希望为整个页面上的所有手风琴一次只打开一个内容。

我很确定我可以使用他们的方法，特别是“Up”方法来完成这项工作，但是我找不到任何有效的示例，而且他们的文档非常稀少。这就是他们提供的全部：

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

HAML：

  %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

【问题讨论】：

您是单独初始化每个手风琴，还是一次性初始化？
@Yass 我一下子相信了。

标签： zurb-foundation accordion zurb-foundation-6

【解决方案1】：

我找到了我的问题的解决方案，以防其他人被卡住：

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

【讨论】：

【解决方案2】：

我无法得到 alexandraleigh 的回答，它还关闭了我刚刚单击打开的手风琴。

以下是我最后写的。它适用于使用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));
                });
            }
        });
    }
});

【讨论】：

【解决方案3】：

我无法得到 r8n5n 的答案 - 可能是因为 Foundation 的更新。但我设法让它在 v6.3.0 上使用以下内容..

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

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

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

    });     
});

【讨论】：

【解决方案4】：

我对以前的答案有些想法

如果您有 2 个手风琴，只需向它们添加类名。例如 class="accordion Accordion-first" 和 class="accordion Accordion-second"。

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

【讨论】：