Zurb Foundation Accordion 嵌套在 Accordion 内部

Posted

技术标签:

【中文标题】Zurb Foundation Accordion 嵌套在 Accordion 内部【英文标题】:Zurb Foundation Accordion Nested Inside 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,它需要对插件进行相当大的修改。 【参考方案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 之间。

【讨论】:

以上是关于Zurb Foundation Accordion 嵌套在 Accordion 内部的主要内容,如果未能解决你的问题,请参考以下文章

Zurb Foundation 'Joyride':如何开始/以编程方式

scss 块网格(来自Zurb Foundation)

通过 SystemJS 加载 Zurb Foundation 站点

SASS 和 Zurb Foundation - 令人困惑的安装说明

模型揭示了foundation-zurb中的ajax调用问题

Zurb Foundation 顶部栏根本不工作