如何使用 Javascript/jquery 切换手风琴

Question

我正试图让我的手风琴切换，但似乎什么都没有发生。通过切换我的意思是单击相同的手风琴标题也应该关闭它。到目前为止，我已经设法通过单击另一个标题来使其工作，前一个标题将关闭，但关闭一个打开的标题并保持它们全部关闭似乎不起作用。

这是我的脚本：

$(document).ready(function() {
  $("#accordion section h1").click(function(e) {
    $(this).parents().siblings("section").addClass("ac_hidden");
    $(this).parents("section").removeClass("ac_hidden");
    $(this).collapse('toggle')
    e.preventDefault();
  });

});

我也尝试在函数$(#accordion).collapse('toggle'), I've tried to use('hide')` 之外播放折叠，但没有运气。

这是一个 jsfiddle：Jsfiddle

任何建议将不胜感激！

谢谢

Answer 1

试试这个

$("#accordion section h1").click(function(e) {
  if (!$(this).closest('section').hasClass('ac_hidden')) {
    $(this).closest("section").addClass("ac_hidden");
  } else {
    $(this).closest("section").siblings().addClass("ac_hidden");
    $(this).closest("section").removeClass("ac_hidden");
  }
  e.preventDefault();
});

我已将.parents() 更改为.closest()，因为它对于这种情况来说是一个更好的选择器，它会抓取最接近点击标题的部分，这是我们想要的，然后我添加了一个检查以确保当前元素没有ac_hidden 类，如果没有，则添加它（向上滑动当前元素），否则我们将向下滑动另一个元素，并且功能几乎已经具备。希望对您有所帮助。

jsFiddle

Answer 2

这是我的网站 benstechgarage.com/accordion.html 上手风琴的 javascript 代码

$('.accordion').on('click', '.accordion-control', function(e) {
      e.preventDefault();
      $(this)
        .next('.accordion-panel')
        .not(':animated')
        .slideToggle();
    });

Answer 3

你只需要检查它是否有类，这样你就可以关闭它 if( !$(this).parents("section").hasClass("ac_hidden")){ $(this).parents().addClass("ac_hidden"); console.log(1) return; }

检查一下： https://jsfiddle.net/jxyozw5c/3/