切換關閉其他打開的div

Question

我想弄清楚如何在擴展其他div時關閉其他div。

在這裏看看我的代碼：

$(document).ready(function() { 
 
\t $(".faq-question").click(function() { 
 
\t 
 
\t \t $(this).toggleClass('open'); 
 
\t \t $(this).parent().next('.field-faq-answer').toggle(); 
 
\t }); 
 
\t 
 
}); \t

.field-faq-answer{ 
 
\t display:none; \t 
 
} 
 
.faq-antwoord{ 
 
\t border-bottom: 1px solid #ccc; \t 
 
\t margin-top:10px; 
 
\t padding-bottom:10px; 
 
} 
 
.faq-antwoord p{ 
 
\t margin-bottom:0px; 
 
\t padding-left: 10px; 
 
    border-left: 2px solid #3395d3; 
 
\t margin-left:10px; 
 
} 
 
.field-faq-question-first{ 
 
\t border-top: 1px solid #ccc; \t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
     <h3 class="faq-question"> 
 
     Titel 1 
 
     </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
     <div class="faq-antwoord"> 
 
     <p> 
 
      TEST 1 
 
     </p> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
     <h3 class="faq-question"> 
 
     Titel 2 
 
     </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
     <div class="faq-antwoord"> 
 
     <p> 
 
      TEST 2 
 
     </p> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
     <h3 class="faq-question"> 
 
     Titel 3 
 
     </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
     <div class="faq-antwoord"> 
 
     <p> 
 
      TEST 3 
 
     </p> 
 
     </div> 
 
    </div> 
 
</div>

現在可以點擊titel 1和titel 2和內容都將顯示。但我想只是想顯示1個回答並隱藏其他

Answer 1

要做到這一點，你需要調用除一個所有其他.field-faq-answer元素所單擊hide()，像這樣：

$(document).ready(function() { 
 
    $(".faq-question").click(function() { 
 
    $(this).toggleClass('open'); 
 
    var $target = $(this).parent().next('.field-faq-answer').toggle(); 
 
    $('.field-faq-answer').not($target).hide(); 
 
    }); 
 
});

.field-faq-answer { 
 
    display: none; 
 
} 
 

 
.faq-antwoord { 
 
    border-bottom: 1px solid #ccc; 
 
    margin-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 

 
.faq-antwoord p { 
 
    margin-bottom: 0px; 
 
    padding-left: 10px; 
 
    border-left: 2px solid #3395d3; 
 
    margin-left: 10px; 
 
} 
 

 
.field-faq-question-first { 
 
    border-top: 1px solid #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
    <h3 class="faq-question"> 
 
     Titel 1 
 
    </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
    <div class="faq-antwoord"> 
 
     <p> 
 
     TEST 1 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
    <h3 class="faq-question"> 
 
     Titel 2 
 
    </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
    <div class="faq-antwoord"> 
 
     <p> 
 
     TEST 2 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
    <h3 class="faq-question"> 
 
     Titel 3 
 
    </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
    <div class="faq-antwoord"> 
 
     <p> 
 
     TEST 3 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

試試這個：

$(document).ready(function() { 
    $(".faq-question").click(function() { 

     $('.field-faq-answer').toggle(); 
     $(this).toggleClass('open'); 
    }); 

}); 

Answer 3

您可以針對所有其他元素，除了那些您正在使用，並關閉那些

$(document).ready(function() { 
    var questions = $(".faq-question").on('click', function() { 
     $(this).toggleClass('open'); 
     questions.not(this).removeClass('open'); 

     var answer = $(this).parent().next('.field-faq-answer').toggle(); 
     $('.field-faq-answer').not(answer).hide(); 
    }); 
}); 

Answer 4

$(document).ready(function() { 
 

 
\t $(".faq-question").click(function() { 
 
    $('.faq-container .field-faq-answer').hide(); 
 
\t \t $(this).toggleClass('open'); 
 
\t \t $(this).parent().next('.field-faq-answer').toggle(); 
 
\t }); 
 
    
 
\t 
 
});

.field-faq-answer{ 
 
\t display:none; \t 
 
} 
 
.faq-antwoord{ 
 
\t border-bottom: 1px solid #ccc; \t 
 
\t margin-top:10px; 
 
\t padding-bottom:10px; 
 
} 
 
.faq-antwoord p{ 
 
\t margin-bottom:0px; 
 
\t padding-left: 10px; 
 
    border-left: 2px solid #3395d3; 
 
\t margin-left:10px; 
 
} 
 
.field-faq-question-first{ 
 
\t border-top: 1px solid #ccc; \t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
     <h3 class="faq-question"> 
 
     Titel 1 
 
     </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
     <div class="faq-antwoord"> 
 
     <p> 
 
      TEST 1 
 
     </p> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
     <h3 class="faq-question"> 
 
     Titel 2 
 
     </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
     <div class="faq-antwoord"> 
 
     <p> 
 
      TEST 2 
 
     </p> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="faq-container"> 
 
    <div class="field-faq-question field-faq-question-first"> 
 
     <h3 class="faq-question"> 
 
     Titel 3 
 
     </h3> 
 
    </div> 
 
    <div class="field-faq-answer"> 
 
     <div class="faq-antwoord"> 
 
     <p> 
 
      TEST 3 
 
     </p> 
 
     </div> 
 
    </div> 
 
</div>

它的工作嘗試。

Answer 5

您可以使用nextAll（）方法作爲faq-container的父級父級，然後使用find來選擇field-FAQ-answer並切換它。

$(this).parent().parent().nextAll('.faq-container').find('.field-faq-answer').toggle();