javascript - Jquery Accordion 关闭

Question

我正致力于为网站创建移动 Accordion 导航。我有一个基本的 Accordion 设置，我遇到的问题是当我打开一个选项卡时我希望其他选项卡自动关闭所以一次只能打开一个选项卡。我已经尝试了一些东西，但我无法让它工作。这是代码 - 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);
};

执行此操作的最佳方法是什么？

Answer 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");
  }
});

简而言之 - 它检查 Accordion 是否打开，如果打开则关闭它，如果没有找到所有打开的 Accordion ，关闭它们然后打开当前 Accordion 。

关键点:- 使用“open”类来保存状态- 使用“this”来引用当前正在操作的 Accordion