Zurb Foundation Accordion 嵌套在 Accordion 内部答案

【问题标题】：Zurb Foundation Accordion Nested Inside AccordionZurb Foundation Accordion 嵌套在 Accordion 内部
【发布时间】：2012-11-24 16:04:12
【问题描述】：

我将Zurb Foundation 用于响应式网站。我想使用以下 HTML 结构将手风琴嵌套在手风琴内：

<ul class="accordion">
    <li class="active">
        <div class="title">First Accordion Panel Title</div>
        <div class="content">First Accordion Panel Content</div>
    </li>
    <li>
        <div class="title">Second Accordion Panel Title</div>
        <div class="content">Second Accordion Panel Content</div>
    </li>
    <li>
        <div class="title">Parent Accordion Panel Title</div>
        <div class="content">

            <ul class="accordion">
                <li class="active">
                    <div class="title">Child Accordion Panel Title</div>
                    <div class="content">Child Accordion Panel Content</div>
                </li>
                ...
            </ul>

        </div>
    </li>
</ul>

看起来像这种设置，当父手风琴面板打开时，随后的子手风琴面板打开（或者至少有一些标志设置为打开，因为箭头像打开的父面板一样指向下方）和子手风琴功能休息。我可能可以在 Foundation 父手风琴内添加一个 jQuery UI 手风琴，但它不会像父手风琴那样响应，因此可能会破坏首先使用 Foundation 的目的。

有人成功做到了吗？

【问题讨论】：

如果不对 jQuery 插件进行大幅修改，这可能无法完成。我查看了 jQuery 代码，它看起来不支持这种行为。
我最近刚刚查看了插件源，看看有哪些基本修改选项，没有选项。我只是推出了自己的风格并使用了他们的风格。我同意 ed，它需要对插件进行相当大的修改。

标签： jquery html css responsive-design zurb-foundation

【解决方案1】：

您只需停止手风琴项目上的点击事件传播，然后，如果您点击子手风琴项目，子点击事件不会关闭父项目。

修改很简单，你必须在点击处理程序中添加param事件，并在else语句中使用event.stopPropagation();激活码当前点击的元素。

修改后的代码，请看代码cmets：

;(function ($, window, undefined){   'use strict';

  $.fn.foundationAccordion = function (options) {
    var $accordion = $('.accordion');

    if ($accordion.hasClass('hover') && !Modernizr.touch) {
      $('.accordion li', this).on({
        mouseenter : function () {
          var p = $(this).parent(),
            flyout = $(this).children('.content').first();
          $('.content', p).not(flyout).hide().parent('li').removeClass('active'); 
          flyout.show(0, function () {
            flyout.parent('li').addClass('active');
          });
        }
      });
    } else { 
      //be sure to add the param event in the click function handler
      $('.accordion li', this).on('click.fndtn', function (event) {
        var li = $(this),
            p = $(this).parent(),
            flyout = $(this).children('.content').first();

        if (li.hasClass('active')) { 
          p.find('li').removeClass('active').end().find('.content').hide();
        } else {
          //stop event propagation          
      event.stopPropagation();
          $('.content', p).not(flyout).hide().parent('li').removeClass('active'); 
          flyout.show(0, function () {
            flyout.parent('li').addClass('active');
          });
        }
      });
    }

  };

})( jQuery, this );

【讨论】：

【解决方案2】：

我遇到了这个问题。手风琴可以工作，但箭头指示器和样式就好像每个儿童手风琴都打开了一样。这是一个 CSS“错误”，您可以通过在 Foundation.css 的第 715 和 716 行添加一个额外的子选择器来修复它：

ul.accordion > li.active > .title { background: white; padding-top: 13px; }
ul.accordion > li.active > .title:after { content: ""; display: block; width: 0; height: 0; border: solid 6px; border-color: #9d9d9d transparent transparent transparent; }

新的子选择器位于 li.active 和 .title 之间。

【讨论】：