Zurb Foundation Accordion — не сворачивать неактивные сегменты

Я использую аккордеон Foundation 3: http://foundation.zurb.com/old-docs/f3/elements.php#accordion

Поведение по умолчанию заключается в том, что когда вы щелкаете вкладку, чтобы развернуть раздел, ранее развернутый раздел сворачивается. Я хотел бы переопределить это, чтобы страница загружалась с раскрытым первым разделом, а затем, когда вы расширяете дополнительные сегменты, все они остаются открытыми. По сути, я хочу полностью отключить свертывание сегментов.

Вот соответствующие js. Я попытался просто заменить все части "removeClass('active')" на "removeClass('inactive'), но, похоже, это ничего не дало.

;(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 );

person artmem    schedule 05.06.2013    source источник


Ответы (2)


Закомментируйте строки в слушателе click, которые удаляют класс active из элемента li. Если вы передумали и хотите разрешить закрытие раздела повторным нажатием, закомментируйте только второй. Смотри ниже:

$(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');
        });
      }
    }
  }
 );
person chrisjsherm    schedule 05.06.2013

Для тех, кто, как и я, не читает документацию, в Foundation 5 есть опция: http://foundation.zurb.com/docs/components/accordion.html и прокрутите до «Дополнительная конфигурация Javascript».

В объекте настроек в Foundation.accordion.js измените multi_expand на «true» с «false» по умолчанию, и все будет хорошо.

settings : {
  active_class: 'active',
  //multi_expand: false,
  multi_expand: true,
  toggleable: true,
  callback : function () {}
},
person Evan Rose    schedule 13.08.2014