html5折叠菜单,html 折叠菜单

　　不到万不得已不要引入前端UI框架，因为HTML5和CSS3已经可以实现大部分功能，比如上一期的《CSS实现最简洁的开关》。

　　但是很多人的思维还停留在web2.0时代，用各种库做UI，导致网页臃肿。今天老师用纯css实现了一个单选折叠菜单，可以不用JavaScript。折叠菜单类似于选项卡，逻辑上是一个单选面板，只是折叠菜单一般是垂直堆叠的，选项卡是水平排列的。

　　标签页：

　　既然是单选，就可以用输入类型=单选的单选按钮来实现。首先，这些单选按钮组的父元素使用form，因为form可以监控按钮组的变化，同时可以通过name属性直接获取RadioNodeList的列表和变化值，非常方便，所以不需要设置其他css选择器。所以这个折叠菜单的html如下：

　　form id= form input type= radio name= collapse div/div input type= radio name= collapse div/div input type= radio name= collapse div/设置窗体的id，以便可以通过窗口直接找到它[id]。每个单选按钮的名称属性要一致，然后通过表单[name]就可以得到单选按钮组。形式[名称]。value是当前选定按钮的值，它是折叠按钮的标题。每个单选按钮后面都有一个div，这是菜单展开的内容。但是收音机默认是这样的：

　　或者使用appearance: none禁用默认样式如上图，然后使用：before作为按钮左侧的名称(读取value属性)，after作为右侧的小箭头(字符和V)，折叠状态由：checked属性表示。

　　input[type= radio ]{ cursor:pointer；外观：无；显示：块；}在{ content: attr(value)之前输入[type= radio ]:}在{ float:right；后输入[type= radio ]:内容：“”；} input[type= radio ]:checked:after { content: v ；}对于div，默认隐藏，只显示选中单选后的div。至于折叠动画，就看需求了。对我来说，没有动画会更清爽。

　　输入[type= radio ]div { display:none；} input[type= radio ]:checked div { display:block；}以上是基本布局，再加上一点其他风格，就变成了：

　　但是，由于收音机的特性，您不能反向选择菜单。菜单展开后，只能点击其他菜单项。当然，这不算什么。如果要反向选择菜单，需要记录上次展开的菜单项。每次有点击事件，可以判断是否重复点击：

　　//for each radio radio . onclick=()={ if(window . radio===radio){ input . checked=false；window.radio=null} else window.radio=radio};这样，实现了单选折叠菜单的反选择能力：

　　没错，图中混乱的文字就是原文被加扰的结果(隐私需要)。您可以通过以下代码对字符串进行加扰：

　　String.split(“”)。sort (()=math.random ()-0.5)。加入(‘’)就是这样。这里介绍的是关于CSS实现单选折叠菜单的文章。关于CSS收音机折叠菜单的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。