Jquery 自动滑动切换答案

【问题标题】：Jquery slidetoggle automaticJquery 自动滑动切换
【发布时间】：2020-09-23 09:14:26
【问题描述】：

我希望幻灯片切换在我点击第二个问题时自动折叠。现在，之前的滑动切换保持打开状态。当屏幕宽度为 700 像素时，代码也会启动。

这是我的代码 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/的链接

【问题讨论】：

标签： jquery

【解决方案1】：

如果我没有理解错：

当您单击打开的答案时，它将被关闭。
当您单击已关闭的答案时，您将打开它，同时关闭其他可见答案

这样，我在答案中添加了选择器.siblings()，这样它只会关闭可见的兄弟姐妹（不包括自我）。通过这样做，如果当前答案被打开，它不会被第一个.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/

【讨论】：

这就是我们想要做的——非常感谢——但是我如何在特定的屏幕宽度上运行它呢？假设屏幕宽度小于 700 像素。
@TheNagaTanker 我不知道你会在哪里使用这个逻辑。但要检查屏幕宽度，您可以使用if ($(window).width() < 700)

【解决方案2】：

为活动答案添加类并在其他答案上单击，使用活动类选择使用上一个答案并隐藏活动元素。

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/

【讨论】：

【解决方案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/

【讨论】：

【解决方案4】：

试试这个，

jQuery(document).ready(function() {
  jQuery(".answers").hide();
  jQuery(".container h4").click(function() {
    jQuery(".answers").hide(500); // first hide all, then show only its related answer, with animation
    jQuery(this).next(".answers").slideToggle(500);
  });
  jQuery(".container h4").addClass(".faq-answers");
});

.container {
  background-color: black;
  color: white;
}

.faq-answers {
  cursor: pointer;
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <h4>
    Question 1
  </h4>
  <div class="answers">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <h4>
    Question 2
  </h4>
  <div class="answers">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <h4>
    Question 3
  </h4>
  <div class="answers">
    Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke.
    We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.
  </div>

  <h4>
    Question 4
  </h4>
  <div class="answers">
    Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've
    known way back when... You know why, David? Because of the kids. They called me Mr Glass.
  </div>
</div>

【讨论】：