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>