怎样通过点击触发开关选项的背景颜色（无论下拉菜单是否可见）？

我们可以通过给开关选项绑定一个点击事件来实现这个需求。在事件处理程序中，使用一个变量来记录下拉菜单的可见性（例如，visible），然后在每次点击开关选项时改变这个变量的值（例如，如果下拉菜单可见就设为 false，反之设为 true）。然后检查这个变量的值来决定是否改变开关选项的背景颜色。 以下是一个简单的示例代码：

HTML代码：

<div id="dropdown" class="dropdown"> <button id="toggle" class="toggle">Toggle</button> <ul class="options"> <li class="option">Option 1</li> <li class="option">Option 2</li> <li class="option">Option 3</li> </ul> </div>

CSS代码：

.dropdown { position: relative; } .options { display: none; list-style: none; padding: 0; } .option { background-color: #fff; border: 1px solid #ccc; padding: 8px; } .show .options { display: block; } .toggle { background-color: #eee; border: none; padding: 8px; cursor: pointer; } .active { background-color: #ccc !important; }

JavaScript代码：

var dropdown = document.getElementById('dropdown'); var toggle = document.getElementById('toggle'); var visible = false;

toggle.addEventListener('click', function() { visible = !visible; // 反转 visible 变量的值 dropdown.classList.toggle('show', visible); // 如果 visible 为 true 就加上 show 类，否则就移除 show 类 toggle.classList.toggle('active', visible); // 如果 visible 为 true 就加上 active 类，否则就移除 active 类 });