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

Question

我有一个 html 代码，我必须将 divs 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();
});

所有 div 共享相同的类因为 css 所以所有 div 同时切换。如何让 div 单独切换？我必须 divide 这个结构吗？我该如何修复此代码？

$(".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") 工作正常但是其他 side 不起作用。我是不是做错了什么？

我修改了上面的代码 :-)，它工作得很好。

$(".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();
});

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

jquery | To make show() and hide() using divs

html

javascript

jquery

toggle