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':如何开始/以编程方式
通过 SystemJS 加载 Zurb Foundation 站点
SASS 和 Zurb Foundation - 令人困惑的安装说明