当我第二次点击按钮时图标没有改变

Question

上面是默认时的图标。当我点击打开类别时，它工作完美。

但是当我再次单击按钮关闭下拉菜单时，问题就出现了。下拉菜单关闭，但图标不会更改为原始位置，即 angle-down。

当我单击类别按钮之外的任意位置以关闭下拉列表时，图标将变为向下角度。但是，当单击按钮关闭下拉菜单时，图标不会变为默认状态。

我的 HTML 代码

<button class="dropbtn"> 
     <i class="fa-solid fa-border-all"></i>
     <p>Browse All Categories</p>
     <i class="smallicon fa-solid fa-angle-down"></i>
</button>

我的JS代码

document.querySelector('.dropbtn').addEventListener('click', function(event) {
            event.stopPropagation(); 
            var dropdownContent = this.nextElementSibling;
            var angleIcon = this.querySelector('.fa-angle-down');
    
            if (dropdownContent.style.display === 'block') {
                dropdownContent.style.display = 'none';
                angleIcon.classList.remove('fa-angle-up');
                angleIcon.classList.add('fa-angle-down');
            } else {
                dropdownContent.style.display = 'block';
                angleIcon.classList.remove('fa-angle-down');
                angleIcon.classList.add('fa-angle-up');

                

            }
        });
    
        // Close dropdown when clicking outside
        document.addEventListener('click', function(event) {
            var dropdowns = document.querySelectorAll('.dropdown-content');
            dropdowns.forEach(function(dropdown) {
                if (dropdown.style.display === 'block' && !event.target.closest('.dropdown')) {
                    dropdown.style.display = 'none';
                    var angleIcon = dropdown.previousElementSibling.querySelector('.fa-angle-up');
                    if (angleIcon) {
                        angleIcon.classList.remove('fa-angle-up');
                        angleIcon.classList.add('fa-angle-down');
                    }
                }
            });
        });

Answer 1

document.addEventListener('DOMContentLoaded', function() {
    const dropbtn = document.querySelector('.dropbtn');
    const dropdownContent = document.querySelector('.dropdown-content');
    const angleIcon = dropbtn.querySelector('.fa-angle-down');

    dropbtn.addEventListener('click', function(event) {
        event.stopPropagation();
        dropdownContent.classList.toggle('show');
        angleIcon.classList.toggle('fa-angle-up');
        angleIcon.classList.toggle('fa-angle-down');
    });

    document.addEventListener('click', function(event) {
        if (!event.target.closest('.dropdown')) {
            dropdownContent.classList.remove('show');
            angleIcon.classList.remove('fa-angle-up');
            angleIcon.classList.add('fa-angle-down');
        }
    });
});

dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  .dropdown-content a:hover {
    background-color: #f1f1f1;
  }

  .show {
    display: block;
  }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<div class="dropdown">
  <button class="dropbtn"> 
    <i class="fa-solid fa-border-all"></i>
    <p>Browse All Categories</p>
    <i class="fa-solid fa-angle-down"></i>
  </button>
  <div class="dropdown-content">
    <a href="#"><i class="fas fa-car"></i> Autos</a>
    <a href="#"><i class="fas fa-laptop"></i> Electro</a>
    <a href="#"><i class="fas fa-pizza-slice"></i> Food</a>
  </div>