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

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

这是我的剧本：

$(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）之外播放折叠。折叠（'toggle'），我也尝试过使用

（'hide'）`但是运气不好

以下是其中的一部分：

如有任何建议，将不胜感激

谢谢你试试这个

$("#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（）

更改为

.nextest（）

，因为这是一个更好的选择，它将抓取与单击标题最近的部分，这是我们想要的，然后我刚刚添加了一个检查，以确保当前元素没有隐藏

ac_

类，如果没有，则添加它（向上滑动当前元素）除此之外，我们正在向下滑动另一个，其功能几乎是您已经拥有的。希望有帮助

试试这个

$("#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（）

更改为

.nextest（）

，因为这是一个更好的选择，它将抓取与单击标题最近的部分，这是我们想要的，然后我刚刚添加了一个检查，以确保当前元素没有隐藏

ac_

类，如果没有，则添加它（向上滑动当前元素）除此之外，我们正在向下滑动另一个，其功能几乎是您已经拥有的。希望有帮助

---

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

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

---

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

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

---

你只需要检查它是否有类，这样你就可以关闭它

if（！$（this）.parents（“section”）.hasClass（“ac\U隐藏”））{
$（this.parents（）.addClass（“ac_hidden”）；
控制台日志（1）
返回；
}

看看这个：

---

您只需检查它是否有类，就可以关闭它

if（！$（this）.parents（“section”）.hasClass（“ac\U隐藏”））{
$（this.parents（）.addClass（“ac_hidden”）；
控制台日志（1）
返回；
}

看看这个：

---

太棒了！谢谢，它在JSFIDLE中工作得很好，但出于某种原因（这在我的CMS中很常见），当我点击标题时，它会将我带到一个页面，上面写着“这个地址在我们的网站上不是一个正常运行的页面”，然后在url中显示

#

，因此出于某种原因，锚标记是interferingI无法真正理解为什么默认设置不起作用，加载页面时是否向页面添加任何动态内容？如果是这种情况，那么您需要使用.on（'click'，function（）{}）而不是.click（）来处理这个问题。在主页上是的，它会动态地提取筹集的资金，但在FAQ页面上不是这样，FAQ页面只是css html和此js代码。我认为这只是我使用Luminate Online/Convio的CMS的一些奇怪问题。这是一个糟糕的系统lol。如果我对href使用

javascript:void（0）

，它可以正常工作，但我觉得在这种情况下使用它是一件坏事。哦！nvm抱歉，伙计，我是个白痴，我不小心替换了

$（文档）。准备好了（函数（）{

粘贴你的lol时，我的代码的一部分现在可以很好地工作了。谢谢你！不用担心，很高兴我可以帮你！谢谢你，它在JSFIDLE中可以很好地工作，但出于某种原因（这在我的CMS中很常见）当我点击标题时，它会将我带到一个页面，上面写着“此地址在我们的网站上不是正常运行的页面”然后在url中显示

#

，因此由于某种原因，锚定标记为interferingI无法真正理解为什么preventDefault不起作用，加载页面时是否向页面添加任何动态内容？如果是这样，则需要使用.on（'click'，function（）{}）而不是.click（）为了解决这个问题。在主页上是的，它会动态地提取筹集的资金，但在FAQ页面上不是这样，FAQ页面只是css html和这个js代码。我想这只是CMS的一些奇怪问题，我使用Luminate Online/Convio。这是一个糟糕的系统lol。如果我使用

javascript:void（0）

对于href，它工作正常，但我觉得在这种情况下使用它是件坏事。哦！nvm对不起，伙计，我是个白痴，我不小心替换了

$（文档）。准备好了（函数（）{

粘贴你的lol时，我的部分代码现在工作得很好，谢谢！不用担心，很高兴我能帮你谢谢你的回复，似乎有很多方法。我也会将此保存为笔记，再次感谢！谢谢你的回复，似乎有很多方法。我也会将此保存为笔记，再次感谢！