CSS实现单选折叠菜单功能

input[type="radio"] + div {
      display: none;
}
 
 
input[type="radio"]:checked + div {
      display: block;
}

以上就是基本布局，再加上一点其他样式，就成了：

但是由于的特性，无法反选，菜单展开后想要折叠只能点别的菜单项，当然这也没什么，如果非要实现反选菜单的功能，需要记录上次展开的菜单项，每次发生点击事件时，判断是否重复点击：

// for every 
radio.onclick = () => {
  if (window.radio === radio) {
    input.checked = false;
    window.radio = null;
  } else window.radio = radio;
};

这样就实现了单选折叠菜单的反选能力：

对了，图中混乱的文字是原来文字被打乱的结果（隐私需要），可以通过下面的代码将一个字符串打乱：

string.split('').sort(() => Math.random() - 0.5).join('')

到此这篇关于CSS实现单选折叠菜单功能的文章就介绍到这了,更多相关CSS单选折叠菜单内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章，希望大家以后多多支持潘少俊衡！