javascript - 如何将事件类添加到 Foundation Accordion dd 元素?

标签 javascript jquery css zurb-foundation accordion

我正在尝试弄清楚如何将事件类添加到 <dd>在基金会的 Accordion 中。目前事件状态仅针对 div 中的内容启用,而不是 <dd> 上的内容。这就是我所追求的。

此处还描述了问题:http://foundation.zurb.com/forum/posts/1061-accordion-foundation-5

当前:

<dd>
<a href="#panel1">Title</a>
<div id="panel1" class="content active">Content</div>
</dd> 

期望:

<dd class="active">
<a href="#panel1">Title</a>
<div id="panel1" class="content active">Content</div>
</dd>

这是当前 Foundation.accordion.js 的代码:

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

Foundation.libs.accordion = {
name : 'accordion',

version : '5.0.1',

settings : {
  active_class: 'active',
  toggleable: true
},

init : function (scope, method, options) {
  this.bindings(method, options);
},

events : function () {
  $(this.scope).off('.accordion').on('click.fndtn.accordion', '[data-accordion] > dd > a', function (e) {
    var accordion = $(this).parent(),
        target = $('#' + this.href.split('#')[1]),
        siblings = $('> dd > .content', target.closest('[data-accordion]')),
        settings = accordion.parent().data('accordion-init'),
        active = $('> dd > .content.' + settings.active_class, accordion.parent());

    e.preventDefault();

    if (active[0] == target[0] && settings.toggleable) {
      return target.toggleClass(settings.active_class);
    }

    siblings.removeClass(settings.active_class);
    target.addClass(settings.active_class);
  });
},

最佳答案

你可以使用jquery来实现

on_some_event {
    $("dd").addClass("active"); //adds 'active' class to all <dd> elements
    $("dd").removeClass("active"); //removes 'active' class from all <dd> elements
    $("dd").toggleClass("active"); //toggles 'active' class for all <dd> elements
}

关于javascript - 如何将事件类添加到 Foundation Accordion dd 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23067114/

相关文章:

javascript - 更改 PhoneCall 表单中查找窗口中的默认实体

javascript - 如何检查 firebase child 是否包含 JavaScript 中的任何特殊值?

javascript - 使用正则表达式只检索 7 位数字的字符串

ios - 如何隐藏 iPhone 上的 Tumblr 应用程序按钮?

html - CSS - 与 Chrome 对齐错误

javascript - jquery 到纯 Javascript 以保持图像的垂直节奏

javascript - 如何限制 val 的位数

javascript - 鼠标移动/滚动到下一个哈希

使用 Jquery 装饰的 Javascript 表单验证

javascript - 当用户将鼠标悬停在 Chrome 或 Firefox 中的链接上时,悬停状态未被激活