按下手風琴時切換一個元素的類

我目前正在使用 Jquery UI 手風琴制作一個 QA 頁面。現在我設法制作了幾個手風琴，但問題是，當手風琴被按下時，我需要（ ）部分變成（-），并且我制作的 jquery 讓所有（ ）按鈕同時轉動按下手風琴按鈕。

如何根據相應的手風琴折疊時使按鈕轉動？

這是我的簡化代碼

$(function() {
  $("#accordion").accordion({
    collapsible: true
  });
});

$(function() {
  $('.qa_accordion_button').click(function() {
    $('.button_outer').toggleClass('pressed');
    $(this).removeClass('pressed');
  });
});

.button_outer {
  color: #ecf0f1;
  background: #e74c3c;
  width: 40px;
  height: 40px;
  border: 0;
  font-size: 1.5em;
  position: relative;
  border-radius: 2rem;
}

.button_outer .minus {
  position: absolute;
  transition: 300ms;
  background: white;
  border-radius: 2px;
}

.button_outer .minus:first-child {
  left: 25%;
  right: 25%;
  height: 10%;
  top: 45%;
}

.button_outer .minus:last-child {
  left: 25%;
  right: 25%;
  height: 10%;
  top: 45%;
  transform: rotate(90deg);
}

.pressed .minus {
  transform: rotate(180deg);
}

.pressed .minus:last-child {
  left: 50%;
  right: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" />
<div id="accordion">
  <div class="qa_accordion_button">
    <p>ACCORDION BUTTON 1</p>
    <div class="button_outer">
      <div class="minus"></div>
      <div class="minus"></div>
    </div>
  </div>
  <div class="accordion_answer">
    <div class="answer_desc">
      <p>ANSWER 1</p>
    </div>
  </div>
  <div class="qa_accordion_button">
    <p>ACCORDION BUTTON 2</p>
    <div class="button_outer">
      <div class="minus"></div>
      <div class="minus"></div>
    </div>
  </div>
  <div class="accordion_answer">
    <div class="answer_desc">
      <p>ANSWER 2</p>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

要執行您需要的操作，請將事件掛鉤到手風琴的事件處理程式beforeActivate和事件處理程式。create使用傳遞給這些處理程式的引數，您可以獲得對當前和先前標題的參考，并在其中的按鈕上設定相關類。

$(function() {
  $("#accordion").accordion({
    collapsible: true,
    beforeActivate: (e, ui) => {
      ui.newHeader.find('.button_outer').addClass('pressed');
      ui.oldHeader.find('.button_outer').removeClass('pressed');
    },
    create: (e, ui) => {
      ui.header.find('.button_outer').addClass('pressed');
    }
  });
});

.button_outer {
  color: #ecf0f1;
  background: #e74c3c;
  width: 40px;
  height: 40px;
  border: 0;
  font-size: 1.5em;
  position: relative;
  border-radius: 2rem;
}

.button_outer .minus {
  position: absolute;
  transition: 300ms;
  background: white;
  border-radius: 2px;
}

.button_outer .minus:first-child {
  left: 25%;
  right: 25%;
  height: 10%;
  top: 45%;
}

.button_outer .minus:last-child {
  left: 25%;
  right: 25%;
  height: 10%;
  top: 45%;
  transform: rotate(90deg);
}

.pressed .minus {
  transform: rotate(180deg);
}

.pressed .minus:last-child {
  left: 50%;
  right: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" />
<div id="accordion">
  <div class="qa_accordion_button">
    <p>ACCORDION BUTTON 1</p>
    <div class="button_outer">
      <div class="minus"></div>
      <div class="minus"></div>
    </div>
  </div>
  <div class="accordion_answer">
    <div class="answer_desc">
      <p>ANSWER 1</p>
    </div>
  </div>
  <div class="qa_accordion_button">
    <p>ACCORDION BUTTON 2</p>
    <div class="button_outer">
      <div class="minus"></div>
      <div class="minus"></div>
    </div>
  </div>
  <div class="accordion_answer">
    <div class="answer_desc">
      <p>ANSWER 2</p>
    </div>
  </div>
</div>

另請注意，您不需要多個 document.ready 事件處理程式 - 頁面中的所有邏輯都可以添加到一個中。

標籤：javascript html jQuery css

上一篇：jQuerydataTablesrow.add根據內容在外部td上添加不同的類

下一篇：如何在資料庫mysql中保存jquery可排序連接串列？