在 html 和 css 中旋转图标

Question

我在点击图标后旋转 -180 度时遇到问题。这是点击之前的图标：

按下图标后：

我期望的是图标旋转-180deg，就像图中紫色的那样：

是否有人遇到过类似的问题或了解可能导致该问题的原因？任何帮助，将不胜感激！这是我的 HTML：

<!DOCTYPE html>
<html>
<head>

  <title>SunPower Energy</title>
  <!-- <style>
    
  </style> -->
  <link href="assets/css/products.css" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/fontawesome.min.js" integrity="sha512-ywaT8M9b+VnJ+jNG14UgRaKg+gf8yVBisU2ce+YJrlWwZa9BaZAE5GK5Yd7CBcP6UXoAnziRQl40/u/qwVZi4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/solid.min.js" integrity="sha512-+KCv9G3MmyWnFnFrd2+/ccSx5ejo1yED85HZOvNDhtyHu2tuLL8df5BtaLXqsiF68wGLgxxMb4yL5oUyXjqSgw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>   -->
  <!-- Boxicons CSS -->
  <!-- <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'> -->
  <link rel="stylesheet" href="/css/all.css">
</head>
 
<!--//////////////////////// Left side navigation bar ////////////////-->
   <div class="main">
    <div class="sidenav">
      <span class="widget_title">ABC</span>
      <hr class="solid">
      <div class="menu">
        <div class="menu-link">
          <a href="#services">DEFG</a>
          <button class="dropdown-btn">
            <i class="fa-solid fa-chevron-down"></i>   
          </button>   
        </div>
          <div class="dropdown-container">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
      </div>
    </div>
   </div>
   <!--/////////////////////// End of left nav ///////////////////////-->
  <script>
    const cartLink = document.querySelector('.cart-link');
    const selectedProductsContainer = document.querySelector('.selected-products-container');
  
    // Toggle the visibility of selected products container
    cartLink.addEventListener('click', function(event) {
      event.preventDefault();
      selectedProductsContainer.style.display = (selectedProductsContainer.style.display === 'none') ? 'block' : 'none';
    });
  
    /* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
    var dropdown = document.getElementsByClassName("dropdown-btn");
    console.log(dropdown);
    var i;
  
    for (i = 0; i < dropdown.length; i++) {
      dropdown[i].addEventListener("click", function() {
        console.log(this);
        this.classList.toggle("active");
        var dropdownContent = this.parentElement.nextElementSibling;
        <!-- need fix -->

        // console.log("dropdownContent: " + dropdownContent);
        if (dropdownContent.style.display === "block") {
          dropdownContent.style.display = "none";
        } else {
          dropdownContent.style.display = "block";
        }
      });
    }

  </script>
</body>
</html>

我的CSS：

\* Fixed sidenav, full height */
.sidenav {
z-index: 1;
background-color: white;
overflow-x: hidden;
overflow-y: hidden;

padding: 20px;
width: 200px;
height: 100vh;
margin-left: 55px;
margin-top: 20px;
}
.sidenav span.widget_title{
font-size: 20px;
color: gray;
font-weight: 700;
}
.sidenav hr .solid{
border-top: 3px solid #bbb;
}
.sidenav .menu{
height: 100%;
background: white;
padding-top: 5px;
}
.sidenav .menu .menu-link{
height: 30px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}

.sidenav .menu .menu-link a{
font-size: 16px;
text-decoration: none;
color: #818181;
}
.dropdown-btn{
border: none;
background: none;
cursor: pointer;
outline: none;
margin-left: 10px;
font-size: 14px;
transition: all 0.3s ease;
width: fit-content;
height: fit-content;
}
/\* On mouse-over */
.sidenav .menu .menu-link a:hover, .dropdown-btn:hover {
color: rgb(12, 210, 12);
}
/* Add an active class to the active dropdown button \*/
.active {
transform: rotate(-180deg);
}

/\* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.sidenav .menu .dropdown-container {
display: none;
background-color: lightgrey;
padding-left: 8px;
}
.sidenav .menu .dropdown-container a{
padding: 6px 8px 6px 16px;
text-decoration: none;
display: block;
font-size: medium;
}
.sidenav .menu .dropdown-container a:hover{
color: rgb(12, 210, 12);
}
/* Optional: Style the caret down icon \*/
.fa-chevron-down {
float: right;
padding-right: 8px;
}

/\* Some media queries for responsiveness \*/
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

我希望图标旋转-180度，就像第三张图片中的紫色那样

Answer 1

您也不需要在问题中包含所有 HTML。您面临的问题与您如何切换

active

类有关。

您可以执行以下操作：

修改 JavaScript 代码以在
```
active
```
元素（箭头图标）而不是按钮上切换
```
<i>
```
类。
使用 CSS 中的
```
:not()
```
伪类来设置非活动下拉按钮的样式，确保其在不活动时具有正确的旋转。

更改此行：

this.classList.toggle("active");

对此：

this.querySelector('.fa-chevron-down').classList.toggle("active");

2.更新CSS：

目前，您拥有

.active

类的 CSS：

.active {
  transform: rotate(-180deg);
}

现在，为非活动下拉按钮（即其默认状态）添加 CSS：

.fa-chevron-down:not(.active) {
  transform: rotate(0deg);
}

现在应该可以工作了。

在 html 和 css 中旋转图标

问题描述投票：0回答：1

1个回答

2.更新CSS：

最新问题

在 html 和 css 中旋转图标

问题描述 投票：0回答：1

1个回答

2.更新CSS：

最新问题

问题描述投票：0回答：1