不到万不得已的时候千万别引入前端UI框架，因为HTML5和CSS3已经能实现绝大多数的功能，比如上期的《CSS实现最简洁的开关》
而很多人的思维还停留在web2.0时代，用各种库来做UI，导致网页臃肿。今天教大家用纯css实现一个单选的折叠菜单，不需要JavaScript就能用。折叠菜单和标签页差不多，逻辑上都是一种单选面板，只不过折叠菜单一般是垂直堆叠的，标签页是横着排列。
标签页：
既然是单选的，就可以用单选按钮来实现。首先这些单选按钮组的父元素用
，因为
可以监听按钮组的变化，同时还能通过name属性直接得到RadioNodeList列表和变化值，非常方便，不用设置其他的css选择器了。所以这个折叠菜单的html如下：
给
设置id，这样可以直接通过window[id]找到它，每个的name属性要一致，然后通过form[name]得到单选组，form[name].value就是当前选中的按钮的value，也就是折叠按钮的标题，每个后面跟着一个
还是先用appearance: none禁用如上图的默认样式，然后利用::before作为按钮左侧的名称（读取value属性），::after作为右侧的小箭头（字符>和v），通过:checked属性表示折叠状态。
input[type="radio"] {
cursor: pointer;
appearance: none;
display: block;
}
input[type="radio"]::before {
content: attr(value);
}
input[type="radio"]::after {
float: right;
content: ">";
}
input[type="radio"]:checked::after {
content: "v";
}
对于
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单选折叠菜单内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部！
相关文章
-
这篇文章主要介绍了CSS 实现 图片鼠标悬停折叠效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-21
-
这篇文章主要介绍了详解CSS外边距折叠引发的问题的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-27
-
外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下2018-10-30
-
这篇文章主要介绍了纯CSS实现可折叠树状菜单，不用js让你体会到css的强大,需要的朋友可以参考下
2018-04-17
-
这篇文章主要介绍了通过HTML+CSS实现折叠样式完整代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-03
最新评论