jQuery |使用 div 制作 show() 和 hide()

Question

我有一个 html 代码，我必须将 div 的 show() 和 hide() 作为一个列表。我知道如何制作 show() 和 hide() 但我不熟悉 html 结构。

这是我的 html 代码。

<!--contants:start-->
<div class="sub_contants">
<!--sub_title:start-->
<div class="titline"></div>
<h2>FAQ</h2>
<!--sub_title:end-->
<!--sub_contants:start-->
<div class="sub_border_faqbox"></div>
<div class="sub_border_faq_q">자주하는 질문?</div>
<div class="sub_border_faq_a">자주하는 질문?<br>답변<br>답변<br>답변<br>답변<br>답변</div>
<div class="sub_border_faq_q">자주하는 질문?</div>
<div class="sub_border_faq_a">자주하는 질문?<br>답변<br>답변<br>답변<br>답변<br>답변</div>
<div class="sub_border_faq_q">자주하는 질문?</div>
<div class="sub_border_faq_a">자주하는 질문?<br>답변<br>답변<br>답변<br>답변<br>답변</div>
<div class="sub_border_faq_q_select">자주하는 질문?</div>
<div class="sub_border_faq_a">자주하는 질문?<br>답변<br>답변<br>답변<br>답변<br>답변</div>
<div class="sub_border_faq_q">자주하는 질문?</div>
<div class="sub_border_faq_a">자주하는 질문?<br>답변<br>답변<br>답변<br>답변<br>답변</div>
<!--sub_contants:end-->
<div class="sub_bottom"></div>

<script language="javascript">
$(".sub_border_faq_a").hide();
$(".sub_border_faq_q").click(function(){
    $(this).addClass("sub_border_faq_q_select");
    $(".sub_border_faq_a").toggle();
});

由于 css 的原因，所有 div 共享相同的类，因此所有 div 可以同时切换。如何使 div 单独切换？我必须划分这个结构吗？ 我该如何修复此代码？

---

$(".sub_border_faq_a").hide();
$(".sub_border_faq_q").click(function(){
$(this).next(".sub_border_faq_a").toggle(function() {
    $(this).prev(".sub_border_faq_q_select").addClass("sub_border_faq_q");
    $(this).prev(".sub_border_faq_q_select").removeClass("sub_border_faq_q_select");
}, function() {
    $(this).prev(".sub_border_faq_q").addClass("sub_border_faq_q_select");
    $(this).prev(".sub_border_faq_q_select").removeClass("sub_border_faq_q");
});

我想 addClass 和 removeClass 来显示 div 是否被选中，但是 addClass("sub_border_faq_q_select") 和 removeClass("sub_border_faq_q") 可以正常工作，但另一边不能工作。我是不是做错了什么？

---

我修复了上面的代码 :-) 效果很好。

$(".sub_border_faq_q").click(function(){
    $(this).next(".sub_border_faq_a").toggle(function() {
        $(this).prev('.sub_border_faq_q').toggleClass( "sub_border_faq_q_select" );
    });
});

Answer 1

你想切换点击问题的下一个兄弟答案，所以

$(".sub_border_faq_a").hide();
$(".sub_border_faq_q").click(function(){
    $(this).addClass("sub_border_faq_q_select");
    $(this).next(".sub_border_faq_a").toggle();
});