在打開并單擊的詳細資訊/摘要上旋轉的圖示-有解無憂

當我單擊第二個詳細資訊/摘要欄位時，圖示僅在第一個詳細資訊/摘要欄位上旋轉，而不會在第二個欄位上旋轉。

我希望圖示在打開并單擊的詳細資訊/摘要上旋轉。

function changeStyle() {
    let element = document.querySelector(".rotate");
    element.classList.toggle('down');
}

.rotate.down {
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

.detail-container {
  padding-right: 100px;
  padding-left: 100px;
  width: 100%;
  min-width: 55%;
  display: flex;
  flex-direction: column;
}

summary {
  padding: 22px;
  background-color: #2d2d2d;
  margin-bottom: .4em;
  cursor: pointer;
  outline: none;
  font-size: 1.5em;
  font-family: "roboto", sans-serif;
  font-weight: 300;
}

   

 .plus {
  display: flex;
  justify-content: space-between;
}

details[open] {
  background-color: #2d2d2d;
  padding-bottom: 20px;
  margin-bottom: 10px;
}

details[open] summary {
  border-bottom: 1px solid black;
}

<div class="detail-container">
<details onclick="changeStyle()">           
  <summary>
  <div class="plus">DEFAULT TEXT <i class="fas fa-plus rotate"></i>
   </div>
   </summary>        
    <p>
    Lorem
  </p>

   </details>  
  <details onclick="changeStyle()">
  <summary>
 <div class="plus">DEFAULT TEXT<i class="fas fa-plus rotate"></i>
  </div>
   </summary>

  <p>
  Lorem
  </p>        
</details>
</div>

這個“ ”應該旋轉 45 度，因為它被點擊但只有頂部的旋轉在打開并單擊的詳細資訊/摘要上旋轉的圖示

uj5u.com熱心網友回復：

document.querySelector(".rotate")獲取rotate檔案中的所有元素。

您需要獲取被點擊的元素，然后找到您需要旋轉的子元素：

function changeStyle() {
    let element = event.target.querySelector(".rotate");
    element.classList.toggle('down');
}

function changeStyle() {
    let element = event.target.querySelector(".rotate");
    element.classList.toggle('down');
}

.rotate.down {
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

summary {
  padding: 22px;
  background-color: #2d2d2d;
  margin-bottom: .4em;
  cursor: pointer;
  outline: none;
  font-size: 1.5em;
  font-family: "roboto", sans-serif;
  font-weight: 300;
}
summary {
  list-style: none;
} 

 .plus {
  display: flex;
  justify-content: space-between;
}

details[open] {
  background-color: #2d2d2d;
  padding-bottom: 20px;
  margin-bottom: 10px;
}

details[open] summary {
  border-bottom: 1px solid black;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"/>
<details onclick="changeStyle()">           
  <summary>
    <div class="plus">DEFAULT TEXT <i class="fas fa-plus rotate"></i></div>
  </summary>        
  <p>
    Lorem
  </p>
</details>  

<details onclick="changeStyle()">
  <summary>
    <div class="plus">DEFAULT TEXT<i class="fas fa-plus rotate"></i></div>
  </summary>
  <p>
    Lorem
  </p>        
</details>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/399375.html

標籤：javascript

上一篇：無法讀取Nodejs上未定義錯誤的屬性“影像”

下一篇：為什么以下部分會導致我的瀏覽器崩潰？