Accordion JS

Question

Cześć, mam problem z Accordionem w Bootstrap Native. Wszystko działa poprawnie prócz jednej rzeczy. Po rozwinięciu innego accordiona clasa .collapsed nie dodaje się do poprzedniego który był rozwinięty. Próbowałem na kilka sposobów i nadal nic. Dodanie klasy collapsed to addClass(element,collapsed); tak samo w drugą stronę removeClass... Poniżej plik JS:

 /* Native Javascript for Bootstrap 4 | Collapse
  -----------------------------------------------*/
  
  // COLLAPSE DEFINITION
  // ===================
  var Collapse = function( element, options ) {
  
    // initialization element
    element = queryElement(element);
  
    // set options
    options = options || {};
  
  
    // event targets and constants
    var accordion = null, collapse = null, self = this, 
      isAnimating = false, // when true it will prevent click handlers
      accordionData = element[getAttribute]('data-parent'),
  
      // component strings
      component = 'collapse',
      collapsed = 'collapsed',
      test = 'test'
  
      // private methods
      openAction = function(collapseElement) {
        bootstrapCustomEvent.call(collapseElement, showEvent, component);
        isAnimating = true;
        addClass(collapseElement,collapsing);
        addClass(collapseElement,showClass);
        addClass(element,collapsed);
          
        setTimeout(function() {
          collapseElement[style][height] = getMaxHeight(collapseElement) + 'px';
  
            
          (function(){
            emulateTransitionEnd(collapseElement, function(){
              isAnimating = false;
              collapseElement[setAttribute](ariaExpanded,'true');
              removeClass(collapseElement,collapsing);
              collapseElement[style][height] = '';
              bootstrapCustomEvent.call(collapseElement, shownEvent, component);
            });
          }());
        }, 20);
      },
      closeAction = function(collapseElement) {
        bootstrapCustomEvent.call(collapseElement, hideEvent, component);
        isAnimating = true;
        collapseElement[style][height] = getMaxHeight(collapseElement) + 'px';
        setTimeout(function() {
          addClass(collapseElement,collapsing);
            
          collapseElement[style][height] = '0px';
          (function() {
            emulateTransitionEnd(collapseElement, function(){
                
              isAnimating = false;
              collapseElement[setAttribute](ariaExpanded,'false');
              removeClass(collapseElement,collapsing);
              removeClass(collapseElement,showClass);
              collapseElement[style][height] = '';
              bootstrapCustomEvent.call(collapseElement, hiddenEvent, component);
            });
          }());
        },20);
      },
      getTarget = function() {
        var href = element.href && element[getAttribute]('href'),
          parent = element[getAttribute](dataTarget),
          id = href || ( parent && targetsReg.test(parent) ) && parent;
        return id && queryElement(id);
      };
    
    // public methods
    this.toggle = function(e) {
      e.preventDefault();
      if (isAnimating) return;
      if (!hasClass(collapse,showClass)) { 
          self.show(); 
      } else { 
          self.hide(); 
      }
    };
    this.hide = function() {
      closeAction(collapse);
      addClass(element,collapsed);
    //jak się zwija dodaje klase
    };
    this.show = function() {
      openAction(collapse);
      removeClass(element,collapsed);
    //jak się rozwija usuwa klase
  
      if ( accordion !== null ) {
        var activeCollapses = getElementsByClassName(accordion,component+' '+showClass);
          
        for (var i=0, al=activeCollapses[length]; i<al; i++) {
          if ( activeCollapses[i] !== collapse) closeAction(activeCollapses[i]);
        }
      }
    };
  
    // init
    if ( !(stringCollapse in element ) ) { // prevent adding event handlers twice
      on(element, clickEvent, this.toggle);
    }
    collapse = getTarget();
    accordion = queryElement(options.parent) || accordionData && getClosest(element, accordionData);
    element[stringCollapse] = this;
  };
  
  // COLLAPSE DATA API
  // =================
  initializeDataAPI(stringCollapse, Collapse, dataToggle);

Jak widać kod nie dodaje .collapsed do poprzednio rozwiniętego accordiona.

 

Answer 1

Ło jeny jaki straszny kod :O Na prawdę ten bootstrap native jest ci potrzebny? Pierwszy raz o nim słyszę i jeśli dobrze teraz wyczytałem to w skrócie jest to uzyskanie takiej ściany nieczytelnego kodu dla zysku kilku KB?

Comments

Testuje go i chciałbym mimo wszystko to wykorzystać. U nich na stronie poprawnie działa ten .accordion. Po pobraniu paczki już i skopiowaniu przykładu nie działa tak jak powinno.