如何在手風琴的加減號圖示之間切換

我正在嘗試為我的手風琴使用加號圖示，并在使用 Javascript 單擊時將其切換為減號圖示，然后在再次單擊時回傳加號。有人可以幫忙嗎？

`

<div class="faqs-container">


        
        <div class="faqs-question">


            <button>
                <h3>Which services do you provide?</h3>
                <i class="bi bi-plus"></i>

            </button>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. </p>


            
        </div>
</div>

`

`

.faqs-container {

    max-width: 90%;
    margin: 0 auto;

}



.faqs-question {
    width: 100%;
    border: 2px solid #999;
    border-radius: 4px;
    margin-bottom: 25px;

}

.faqs-container:hover{
    color: #999;
}


.faqs-question button{
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px;
    border: none;
    outline: none;
    font-size: 24px;
    font-family: 'interstate', sans-serif;
    font-weight: 500;
    color: #300600;
    cursor: pointer;
    transition: 0.6s ease-in-out;
}




.faqs-question button h3{
    font-size: 28px;
    font-family: 'interstate', sans-serif;
    font-weight: 500;
    transition: 0.2s ease-in-out;
    padding: 10px;
}

.faqs-question button h3:hover{
    color: #999;
    transition: 0.2s ease-in-out;
}


.faqs-question i{

    font-size: 48px;
    transition: 0.5s ease-in-out;
}

.faqs-question i:hover{
    color: #999;
    transition: 0.2s ease-in-out;
}

.faqs-question p {
    margin-top: 10px;
    font-size: 24px;
    font-family: 'Merriweather-Sans', sans-serif;
    font-weight: 300;
    line-height: 55px;
    color: #444;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: 0.6s ease;
}





.faqs-question p.show{
    max-height: 45vh;
    opacity: 1;
    padding: 10px 0px 40px 15px;
    padding-right: 40px;
    padding-left: 20px;
    margin-bottom: 35px;
}

`

`

<script>
    
 const buttons = document.querySelectorAll('button');

buttons.forEach( button =>{
    button.addEventListener('click',()=>{

          const faq = button.nextElementSibling;
            faq.classList.toggle('show');
            
         
    })
} )


</script>

`

我不知道從哪里開始。雖然我想出了如何在點擊時顯示手風琴答案，但我不確定如何切換減號圖示..

uj5u.com熱心網友回復：

請像這樣更新您的javascript代碼：

<script>
    const buttons = document.querySelectorAll('button');

    buttons.forEach(button => {
        button.addEventListener('click', () => {

            const faq = button.nextElementSibling;
            faq.classList.toggle('show');

            const icon = button.children[1];
            if (icon.classList.contains('bi-plus')) {
                icon.className = "bi bi-dash";
            } else {
                icon.className = "bi bi-plus";
            }


        })
    })
</script>

uj5u.com熱心網友回復：

您可以將以下內容添加到現有的 javascript 中：

const icon = button.querySelector('.bi');

if (icon.classList.contains("bi-plus")) {
  icon.classList.toggle("bi-plus");
  icon.classList.toggle("bi-dash");
} else if (icon.classList.contains("bi-dash")) {
  icon.classList.toggle("bi-dash");
  icon.classList.toggle("bi-plus");
}

你可以在這里看到它的實際效果：https ://jsfiddle.net/hsabio/42tr8jq0/43/

uj5u.com熱心網友回復：

我還希望您記住 HTML 已經內置在手風琴中，幾乎不需要 js --> HTML 摘要。使用最適合目的的任何東西。

反正。我剛剛選擇了“每個”加號圖示，所以我得到了這些圖示的“陣列/節點串列”。我將索引添加到 forEach 回圈中，這樣我就可以知道我在哪個按鈕上。現在，如果頁面上的按鈕和圖示數量完全相同，則索引每次都與圖示完美匹配。之后是修改加號圖示的時候了，當按鈕被點擊時。添加和刪??除類或其他內容。你可以嘗試這樣的事情：

const buttons = document.querySelectorAll("button");
// cosnst icons = document.querySelctorAll('.bi-plus');

buttons.forEach((button, index) => {
  //adding index gives me the index of the current button
  button.addEventListener("click", () => {
    const faq = button.nextElementSibling;
    faq.classList.toggle("show");

    if (
      document.querySelector(".bi-plus").innerHTML ==
      "-" /*icons[index].classList.contains('bi-plus')  */
    ) {
      document.querySelector(".bi-plus").innerHTML = " ";
      //icons[index].classList.add('bi-minus');
      //icons[index].classList.remove('bi-plus');
    } else if (
      document.querySelector(".bi-plus").innerHTML ==
      " " /*icons[index].classList.contains('bi-minus')  */
    ) {
      document.querySelector(".bi-plus").innerHTML = "-";
      //icons[index].classList.remove('bi-minus');
      //icons[index].classList.add('bi-plus');
    }
  });
});

.faqs-container {
  max-width: 90%;
  margin: 0 auto;
}

.faqs-question {
  width: 100%;
  border: 2px solid #999;
  border-radius: 4px;
  margin-bottom: 25px;
}

.faqs-container:hover {
  color: #999;
}

.faqs-question button {
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 15px;
  border: none;
  outline: none;
  font-size: 24px;
  font-family: "interstate", sans-serif;
  font-weight: 500;
  color: #300600;
  cursor: pointer;
  transition: 0.6s ease-in-out;
}

.faqs-question button h3 {
  font-size: 28px;
  font-family: "interstate", sans-serif;
  font-weight: 500;
  transition: 0.2s ease-in-out;
  padding: 10px;
}

.faqs-question button h3:hover {
  color: #999;
  transition: 0.2s ease-in-out;
}

.faqs-question i {
  font-size: 48px;
  transition: 0.5s ease-in-out;
}

.faqs-question i:hover {
  color: #999;
  transition: 0.2s ease-in-out;
}

.faqs-question p {
  margin-top: 10px;
  font-size: 24px;
  font-family: "Merriweather-Sans", sans-serif;
  font-weight: 300;
  line-height: 55px;
  color: #444;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: 0.6s ease;
}

.faqs-question p.show {
  max-height: 45vh;
  opacity: 1;
  padding: 10px 0px 40px 15px;
  padding-right: 40px;
  padding-left: 20px;
  margin-bottom: 35px;
}

<div class="faqs-container">
  <div class="faqs-question">
    <button>
      <h3>Which services do you provide?</h3>
      <i class="bi bi-plus"> </i><!-- added the plus for demonstartion (you can remove it) --->
    </button>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
  </div>
</div>

標籤：javascriptsvg图标切换手风琴

上一篇：使用ssh的cat命令無法按預期作業

下一篇：如何在被圓圈包圍的html5SVG圓圈中設定三種不同的顏色