效果例子地址:https://www.js-css.cn/a/jscode/nav/2014/1231/1424.html
这个是网上提供的效果,一开始觉得效果不错,可以使用一下,但是真正用到项目上发现很多问题,于是自己进行了一些调整,这样可以兼容显示在手机,且不会有溢出这些情况,先上改过的效果图(item2和item4为展开状态):
看到这觉得也就是改了字体居中等样式,其实重点修改的是溢出问题,修改后的bellows-theme.css如下:
/* .bellows {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} */
.bellows__header {
position: relative;
padding: 10px 2px;
border: 1px solid #0087e7;
/* border-width: 0 0 1px; */
background: #0097ff; //原色#3498db
color: white;
-webkit-tap-highlight-color: transparent; }
.bellows__header:active {
background: #0087e7; }
.bellows__header::before, .bellows__header::after {
content: '';
position: absolute;
top: 50%;
left: 20px;
z-index: 2;
display: block;
width: 16px;
height: 4px;
margin-top: -2px;
background: white;
pointer-events: none;
-webkit-transition: -webki