Question

我正在使用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的目的。

有没有人成功完成这项工作？

Answer 1

您只需要停止手风琴项目的点击事件进程，然后，如果您点击儿童手风琴项目，子点击事件不会关闭父项目。

修改很简单，你必须在点击处理程序中添加param事件，并在其他statament中使用 event.stopPropagation（）; 和激活码当前点击的元素。

修改后的代码，请看一下代码注释：

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

Answer 2

我遇到了这个问题。手风琴可以工作，但箭头指示器和造型就好像每个儿童手风琴都是开放式的。这是一个CSS“bug”，你可以通过在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 之间。

Zurb Foundation Accordion嵌套手风琴

2 个答案: