Jquery滑动开关自动切换

Question

当我点击第二个问题时，我希望幻灯片切换自动崩溃。现在，前面的滑动开关仍然处于打开状态。此外，当屏幕宽度为700 is时，代码就会启动。

以下是我的jquery代码

jQuery(document).ready(function(){
jQuery(".answers").hide();
jQuery(".container h4").click(function(){
    jQuery(this).next(".answers").slideToggle();
});
jQuery(".container h4").addClass(".faq-answers");
});

我也试过了这个窗口的宽度

(window).resize(function() {
  console.log($( window ).width());
  var windowwidth = $( window ).width();
  if (windowwidth > 500) {
    jQuery(".answers").hide();
    jQuery(".container h4").click(function(){
      jQuery(this).next(".answers").slideToggle();
  }

});

指向JSfiddle https://jsfiddle.net/bw6k874b/21/的链接

Answer 1

如果我不理解错了：

1. 当你点击一个打开的答案，它就会关闭。
2. 当您单击一个关闭的答案时，您将打开它，同时关闭其他可见的答案。

这样，我在答案中添加了选择器.siblings()，这样它只会关闭可见的兄弟姐妹(不包括self)。通过这样做，如果打开了当前的答案，第一个.slideToggle()就不会关闭它

jQuery(document).ready(function(){
  jQuery(".answers").hide();
  jQuery(".container h4").click(function(){
   jQuery(this).next(".answers").siblings(".answers:visible").slideToggle();
   jQuery(this).next(".answers").slideToggle();
  });
  jQuery(".container h4").addClass(".faq-answers");
});

更新小提琴：https://jsfiddle.net/bw6k874b/27/

Answer 2

为活动答案添加类，然后单击其他答案，选择使用前面的答案使用active类，并隐藏active元素。

jQuery(document).ready(function() {
  jQuery(".answers").hide();
  jQuery(".container h4").click(function() {
    var activeAnswer = $('.answers.active');
    if (activeAnswer.length)
      $('.answers.active').slideToggle().removeClass('active');
    jQuery(this).next(".answers").slideToggle().addClass('active');
  });
  jQuery(".container h4").addClass(".faq-answers");
});

https://jsfiddle.net/qyp0vvv5/

Answer 3

slideUp所有答案内容点击：

jQuery(document).ready(function(){
 jQuery(".answers").hide();
 jQuery(".container h4").click(function(){
   jQuery(".answers").slideUp(); // -------- ADD THIS LINE
   jQuery(this).next(".answers").slideToggle();
 });
 jQuery(".container h4").addClass(".faq-answers");
});

更新小提琴：https://jsfiddle.net/bw6k874b/26/