Question

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

简而言之 - 它会检查手风琴是否打开，如果是，它会关闭它，如果不是它找到所有打开的手风琴，关闭它们然后打开当前的手风琴。

关键词： - 使用“open”类来保持状态 - 使用“this”来指代目前正在采取行动的手风琴

Jquery手风琴关闭

1 个答案: