Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
<link href="../css/20240409.css" rel="stylesheet">
</head>
<body>
<div class="box">
<div class="dropdown">Button
<span class="left-icon"></span>
<span class="right-icon"></span>
<div class="items">
<a href="#" style="--i:1;"><span></span>Vue</a>
<a href="#" style="--i:2;"><span></span>React</a>
<a href="#" style="--i:3;"><span></span>JQuery</a>
</div>
</div>
</div>
<script>
const dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(){
this.classList.toggle('active');
})
</script>
</body>
</html>