jquery slidetoggle automatic

Question

我希望Slide toggle在我点击第二个问题时自动折叠。现在前一个滑动窗口仍然打开。当屏幕宽度为700px时，代码也会启动。

这里是我的代码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()，以便它只是接近可见光的兄弟姐妹（不含个体经营） 。通过这样做，如果当前的答案被打开，它不会被第一.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

添加类活动的答案，就太想这其他答案单击，使用活动类选择使用先前答案并隐藏活动元素。

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/

Answer 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"> 
 
    Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll 
 
    kill the motherfucker, know what I'm sayin'? 
 
    </div> 
 

 
    <h4> 
 
    Question 2 
 
    </h4> 
 
    <div class="answers"> 
 
    he path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's 
 
    keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee. 
 
    </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>