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

由于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();
});

jquery |使用div制作show（）和hide（）

1 个答案: