首页 文章

Zurb Foundation Accordion - 不要崩溃非活动段

提问于
浏览 次
3

我正在使用Foundation 3手风琴：http://foundation.zurb.com/old-docs/f3/elements.php#accordion

默认行为是，当您单击选项卡以展开某个部分时，先前展开的部分会折叠 . 我想覆盖它，以便页面加载第一部分展开，然后当您展开其他部分时，它们都保持打开状态 . 基本上，我想完全禁用折叠段 .

这是相关的js . 我尝试用“removeClass（'inactive'）替换所有”removeClass（'active'）“部分，但它似乎没有做任何事情 .

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

  $.fn.foundationAccordion = function (options) {

// DRY up the logic used to determine if the event logic should execute.
var hasHover = function(accordion) {
  return accordion.hasClass('hover') && !Modernizr.touch
};

$(document).on('mouseenter', '.accordion li', function () {
    var p = $(this).parent();

    if (hasHover(p)) {
      var flyout = $(this).children('.content').first();

      $('.content', p).not(flyout).hide().parent('li').removeClass('active');
      flyout.show(0, function () {
        flyout.parent('li').addClass('active');
      });
    }
  }
);

$(document).on('click.fndtn', '.accordion li .title', function () {
    var li = $(this).closest('li'),
        p = li.parent();

    if(!hasHover(p)) {
      var flyout = li.children('.content').first();

      if (li.hasClass('active')) {
        p.find('li').removeClass('active').end().find('.content').hide();
      } else {
        $('.content', p).not(flyout).hide().parent('li').removeClass('active');
        flyout.show(0, function () {
          flyout.parent('li').addClass('active');
        });
      }
    }
  }
 );

      };

    })( jQuery, this );
jquery accordion zurb-foundation

2 回答

  • 1

    注释掉 click 侦听器中从 li 元素中删除 active 类的行 . 如果您改变主意并希望通过再次单击来关闭该部分，则只注释掉第二部分 . 见下文：

    $(document).on('click.fndtn', '.accordion li .title', function () {
    var li = $(this).closest('li'),
        p = li.parent();

    if(!hasHover(p)) {
      var flyout = li.children('.content').first();

      if (li.hasClass('active')) {
        //p.find('li').removeClass('active').end().find('.content').hide();
      } else {
        //$('.content', p).not(flyout).hide().parent('li').removeClass('active');
        flyout.show(0, function () {
          flyout.parent('li').addClass('active');
        });
      }
    }
  }
 );
    回复于
  • 1

    对于那些没有阅读像我这样的文档的人，Foundation 5将其作为一个选项包含在内：http://foundation.zurb.com/docs/components/accordion.html并滚动到"Optional Javascript Configuration."

    在foundation.accordion.js的settings对象中，从默认的“false”将multi_expand更改为“true”，你就可以了 .

    settings : {
  active_class: 'active',
  //multi_expand: false,
  multi_expand: true,
  toggleable: true,
  callback : function () {}
},
    回复于

相关问题