jQuery的手风琴亲密

Question

I'm working on creating a mobile accordion nav for a website. I have a basic accordion set up, the problem I am having is when I open one tab I want the other tabs to automatically close so only one tab can be opened at once. I've tried a few things but I can't get it to work. Here is the code - http://codepen.io/anon/pen/OVvZev

// 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);
};

What's the best way to go about doing this?

Answer 1

Here's a solution: 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");
  }
});

In short - it checks if the accordion is open, if so it closes it, if not it finds all open accordions, closes them and then opens the current one.

Key things: - using class "open" to preserve the state - using "this" to reference to accordion currently being actioned