jQuery slideToggle current div and slideUp the rest divs tha

Question

我正试图在有div的地方构建一个常见问题页面，点击它应该会滑动其中的另一个div以获得可见性。

一旦点击它，我想要除此之外的任何其他div，它们对slideUP可见。

我的代码目前的工作方式与我想要的完全不同。我认为问题在于.slideUp((部分查找可见的其他元素("faq-f-a:visible"(。

$(document).ready(function(){
// FAQ Q1
$(".faq-q1").click(function(){
$("#faq-f-a:visible").not(this).slideUp();
$(".faq-a1").slideToggle(500);
});
// FAQ Q2
$(".faq-q2").click(function(){
$("#faq-f-a:visible").not(this).slideUp();
$(".faq-a2").slideToggle(500);
});
// FAQ Q3
$(".faq-q3").click(function(){
$("#faq-f-a:visible").not(this).slideUp();
$(".faq-a3").slideToggle(500);
});
});

body {
background: #FFF;
padding: 50px;
font-family: Helvetica;
}
#faq-f-wrap {
padding: 40px;
font-size: 25px;
text-align: center;
margin: 0 auto;
width: 300px;
cursor: pointer; 
}
#faq-f-a {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FAQ 01 -->
<div id="faq-f-wrap">
<div id="faq-f-q" class="faq-q1">
<span id="faq-f-txt">(1) This is a Question</span>
<div id="faq-f-a" class="faq-a1">
<span id="faq-f-ans">This is an answare!</span>
</div>
</div>
</div>

<!-- FAQ 02 -->
<div id="faq-f-wrap">
<div id="faq-f-q" class="faq-q2">
<span id="faq-f-txt">(2) This is a Question</span>
<div id="faq-f-a" class="faq-a2">
<span id="faq-f-ans">This is an answare!</span>
</div>
</div>
</div>
<!-- FAQ 03 -->
<div id="faq-f-wrap">
<div id="faq-f-q" class="faq-q3">
<span id="faq-f-txt">(3) This is a Question</span>
<div id="faq-f-a" class="faq-a3">
<span id="faq-f-ans">This is an answare!</span>
</div>
</div>
</div>

Js在此报价

Answer 1

您似乎交换了ID和类

我会预料到这一点——我把大多数ID都改成了类。

实际上，你甚至不再需要身份证

$(document).ready(function() {
$(".faq-q").click(function() {
const $ans = $(this).closest(".faq-f-wrap").find(".faq-a")
$(".faq-a:visible").not($ans).slideUp();
$ans.slideToggle(500);
});
});

body {
background: #FFF;
padding: 50px;
font-family: Helvetica;
}
.faq-f-wrap {
padding: 40px;
font-size: 25px;
text-align: center;
margin: 0 auto;
width: 300px;
cursor: pointer;
}
.faq-a {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FAQ 01 -->
<div class="faq-f-wrap">
<div id="faq-f-q1" class="faq-q">
<span id="faq-f-id1">1</span>
<span id="faq-f-txt1">This is a Question</span>
<div id="faq-f-a1" class="faq-a">
<span id="faq-f-ans1">This is an answer!</span>
</div>
</div>
</div>

<!-- FAQ 02 -->
<div class="faq-f-wrap">
<div id="faq-f-q2" class="faq-q">
<span id="faq-f-id2">2</span>
<span id="faq-f-txt2">This is a Question</span>
<div id="faq-f-a2" class="faq-a">
<span id="faq-f-ans2">This is an answer!</span>
</div>
</div>
</div>
<!-- FAQ 03 -->
<div class="faq-f-wrap">
<div id="faq-f-q" class="faq-q">
<span id="faq-f-id3">3</span>
<span id="faq-f-txt3">This is a Question</span>
<div id="faq-f-a3" class="faq-a">
<span id="faq-f-ans3">This is an answer!</span>
</div>
</div>
</div>