如何实现下拉菜单箭头点击旋转180度（优先CSS方案）

CSS实现方案（优先推荐） #

问题出在HTML结构与CSS选择器不匹配：你写的.touch:checked ~ .angle无法生效，因为<input>在<label>之后，而CSS兄弟选择器~只能选中当前元素之后的兄弟节点，无法向前选择。调整HTML结构，把<input>移到<label>前面，就能用CSS直接控制箭头旋转。

修改后的HTML代码 #

<input type="checkbox" id="touch" class="touch">
<label for="touch" class="nav-label">
  <span id="services">Hizmetlerimiz</span>
  <i class="fa-solid fa-angle-down angle" style="color: #f282a6;"></i>
</label>
<ul class="slide">
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
  <li><a href="#">Lorem Ipsum</a></li>
</ul>

修改后的CSS代码 #

.slide {
  list-style-type: none;
  clear: both;
  width: 100%;
  height: 0px;
  overflow: hidden;
  transition: height .4s ease;
}

/* 复选框选中时，控制label内的箭头旋转 */
.touch:checked + .nav-label .angle {
  transform: rotate(180deg);
  transition: transform 200ms linear;
}

.slide li { padding: 30px; }

#touch {
  position: absolute;
  opacity: 0;
  height: 0px;
}    

#touch:checked ~ .slide { height: 300px; }  

JavaScript实现方案（无需调整HTML结构） #

如果不想改动原有HTML结构，可以用JS监听复选框状态变化，动态切换箭头样式：

JavaScript代码 #

const touchInput = document.getElementById('touch');
const angleIcon = document.querySelector('.angle');

touchInput.addEventListener('change', function() {
  angleIcon.style.transform = this.checked ? 'rotate(180deg)' : 'rotate(0deg)';
});

保持你原有的HTML和CSS代码不变，添加这段JS即可实现箭头旋转效果。

内容的提问来源于stack exchange，提问作者Moyladiva