我正致力于为网站创建移动手风琴导航。我有一个基本的手风琴设置,我遇到的问题是,当我打开一个标签时,我希望其他标签自动关闭,这样一次只能打开一个标签。我已经尝试了一些东西,但我无法让它发挥作用。 这是代码 - 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);
};
最好的方法是做什么?
答案 0 :(得分:2)
这是一个解决方案: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”来指代目前正在采取行动的手风琴