2015-07-07 2 views
0

Я работаю над созданием мобильного аккордеона для веб-сайта. У меня установлен базовый аккордеон, проблема заключается в том, что когда я открываю одну вкладку, я хочу, чтобы другие вкладки автоматически закрывались, поэтому сразу можно открыть только одну вкладку. Я пробовал несколько вещей, но я не могу заставить его работать. Любая помощь будет принята с благодарностью. Вот код - http://codepen.io/anon/pen/OVvZevJquery accordian закрыть

// Dropdown Menu 
var dropdown = document.querySelectorAll('.dropdown'); 
var dropdownArray = Array.prototype.slice.call(dropdown, 0); 
dropdownArray.forEach(function (el) { 
    var button = el.querySelector('a[data-toggle="dropdown"]'), 
     menu = el.querySelector('.dropdown-menu'), 
     arrow = button.querySelector('i.icon-arrow'); 

    button.onclick = function (event) { 
     if (!menu.hasClass('show')) { 
      menu.classList.add('show'); 
      menu.classList.remove('hide'); 
      arrow.classList.add('open'); 
      arrow.classList.remove('close'); 
      event.preventDefault(); 
     } else { 
      menu.classList.remove('show'); 
      menu.classList.add('hide'); 
      arrow.classList.remove('open'); 
      arrow.classList.add('close'); 
      event.preventDefault(); 
     } 
    }; 
}); 

Element.prototype.hasClass = function (className) { 
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className); 
}; 

Какой самый лучший способ пойти об этом?

ответ

1

Вот решение: http://codepen.io/merlinmason/pen/KpoBRm

$(".accordian .title").on("click", function() { 
    var content = $(this).parent().find(".content"); 

    if ($(content).hasClass("open")) { 
    $(content).slideUp(400).removeClass("open"); 
    } else { 
    $(".content.open").slideUp(400).removeClass("open"); 
    $(content).slideDown(400).addClass("open"); 
    } 
}); 

Короче - он проверяет, аккордеон открыт, если так закрывает его, если не находит все открытые аккордеоны, закрывает их, а затем открывает текущий.

Ключевые вещи: - используя класс «открытый», чтобы сохранить состояние - с помощью «это», чтобы ссылка на аккордеоне в настоящее время действовавших

Смежные вопросы