7

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

有没有人成功做到这一点？

4

2 回答 2

1

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

修改很简单，需要在 click handler 中添加 param 事件，使用 event.stopPropagation(); 在带有当前单击元素的激活码的 else 语句中。

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

;(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 );
于 2012-12-20T13:16:39.977 回答
0

我遇到了这个问题。手风琴可以工作，但箭头指示器和样式就好像每个儿童手风琴都打开了一样。这是一个 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之间。

于 2013-03-06T17:19:30.890 回答