Zurb Foundation Accordion - Не свивайте неактивните сегменти

Използвам Foundation 3 Accordion: 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