在常見問題中單擊的元素的toggleClass圖示

一旦我點擊它，我試圖切換問題的圖示，我幾乎讓它作業，當你點擊一個問題時圖示會切換，當你再次點擊同一問題時會切換回來。

當您單擊一個問題然后單擊另一個問題時會出錯。您點擊的第一個問題是自動關閉，但圖示不會切換回來。

$('.answer').hide();

$('.question').click(function(){
   
    var $this = $(this).parent().find('.answer');
    $(".answer").not($this).hide();
    $this.toggle();
    
    $(this).toggleClass('faqmin')
  
});

* {
  border:0;
  padding:0;
  margin:0;
}

.faq {
  width: 100%;
  padding:10px 0 10px 0;
  border:0;
  border-bottom: 1px solid #e0e0e0;
  outline: none;
  cursor: pointer;
}

.faqplus:after {
  float: right;
  margin-left: 5px;
  content: '\002B';
  font-size:18px;
  color: black;
}

.faqmin:after  {
  content: "\2212";
}

.answer {
  margin-top:10px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="faq">
  <div class="question faqplus">Question</div>
  <div class="answer">Answer</div>
</div>

<div class="faq">
  <div class="question faqplus">Question</div>
  <div class="answer">Answer</div>
</div>

<div class="faq">
  <div class="question faqplus">Question</div>
  <div class="answer">Answer</div>
</div>

uj5u.com熱心網友回復：

您需要自己在另一個問題中切換加號/減號：

$(".faqmin").not(this).toggleClass('faqmin')

請注意，$this用于表示$(this)可能會非常令人困惑的其他含義，因此我在下面的代碼段中更改了該變數。

$('.answer').hide();

$('.question').click(function(){
   
    var thisans = $(this).parent().find('.answer');
    $(".answer").not(thisans).hide();    
    $(".faqmin").not(this).toggleClass('faqmin')

    thisans.toggle();
    $(this).toggleClass('faqmin')  
});

* {
  border:0;
  padding:0;
  margin:0;
}

.faq {
  width: 100%;
  padding:10px 0 10px 0;
  border:0;
  border-bottom: 1px solid #e0e0e0;
  outline: none;
  cursor: pointer;
}

.faqplus:after {
  float: right;
  margin-left: 5px;
  content: '\002B';
  font-size:18px;
  color: black;
}

.faqmin:after  {
  content: "\2212";
}

.answer {
  margin-top:10px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="faq">
  <div class="question faqplus">Question</div>
  <div class="answer">Answer</div>
</div>

<div class="faq">
  <div class="question faqplus">Question</div>
  <div class="answer">Answer</div>
</div>

<div class="faq">
  <div class="question faqplus">Question</div>
  <div class="answer">Answer</div>
</div>

注意：根據您的 html 設定，您可以使用 css 切換答案

顯示代碼片段

$('.question').click(function(){
    $(".faqmin").not(this).removeClass('faqmin');
    $(this).toggleClass('faqmin');
});

* {
  border:0;
  padding:0;
  margin:0;
}

.faq {
  width: 100%;
  padding:10px 0 10px 0;
  border:0;
  border-bottom: 1px solid #e0e0e0;
  outline: none;
  cursor: pointer;
}

.faqplus:after {
  float: right;
  margin-left: 5px;
  content: '\002B';
  font-size:18px;
  color: black;
}

.faqmin:after  {
  content: "\2212";
}

.answer {
  margin-top:10px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  display:none;
}
.faqmin   .answer {
  display:block;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="faq">
  <div class="question faqplus">Question</div>
  <div class="answer">Answer</div>
</div>

<div class="faq">
  <div class="question faqplus">Question</div>
  <div class="answer">Answer</div>
</div>

<div class="faq">
  <div class="question faqplus">Question</div>
  <div class="answer">Answer</div>
</div>

如果你添加一個樣式復選框，你根本不需要任何 js，把那個留給你。

uj5u.com熱心網友回復：

當用戶點擊時，您需要重置所有問題的類別。

https://api.jquery.com/attr/

$('.answer').hide();

$('.question').click(function(){
    $('.question').attr('class', 'question faqplus'); // here
    var $this = $(this).parent().find('.answer');
    $(".answer").not($this).hide();
    $this.toggle();
    
    $(this).toggleClass('faqmin')
  
});

* {
  border:0;
  padding:0;
  margin:0;
}

.faq {
  width: 100%;
  padding:10px 0 10px 0;
  border:0;
  border-bottom: 1px solid #e0e0e0;
  outline: none;
  cursor: pointer;
}

.faqplus:after {
  float: right;
  margin-left: 5px;
  content: '\002B';
  font-size:18px;
  color: black;
}

.faqmin:after  {
  content: "\2212";
}

.answer {
  margin-top:10px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="faq">
  <div class="question faqplus">Question</div>
  <div class="answer">Answer</div>
</div>

<div class="faq">
  <div class="question faqplus">Question</div>
  <div class="answer">Answer</div>
</div>

<div class="faq">
  <div class="question faqplus">Question</div>
  <div class="answer">Answer</div>
</div>

標籤：javascript 查询

上一篇：Coldfusion/Lucee通過AJAX進行多條件選擇

下一篇：通過資料屬性獲取元素