以前学前端的时候都没教CSS3,而因为主要方向是后端,所以一直没有关注CSS3的内容
曾经实现的菜单折叠,是使用了JS来实现的.最近复习前端,直接使用CSS3,无JS的方式实现一个菜单折叠.
记录一下大概思路和提醒不能停下学习.

先是介绍思路点

  1. 折叠可以想象成开关，而开关就能想到CheckBox
  2. css存在:checked选择器,这个可以设置CheckBox选中时的效果
  3. 因为transition不能直接从0高度变成auto，但可以用max-w/h来代替

↓可以点击尝试，点击文字和选中框都能触发
!!!

!!!

我这边有一个已有的下拉折叠Demo代码，更多的样式是为了看上去好看，核心依然是选中框+for+:checked

css的'+'是相邻兄弟选择器,这里是为了css能选择 选中框 后面的文字

Html代码：

<div className="MenuBody">
<ul className="MenuBox">
<hr/> 
    <input type="checkbox" name="" id="MenuCheckBox1" />
    <label htmlFor="MenuCheckBox1" className="MenuName">菜单二</label>
    <div className="MenuList">
        <li className="MenuItem">子菜单</li>
        <li className="MenuItem">子菜单</li>
        <li className="MenuItem">子菜单</li>
    </div>
</ul>
<ul className="MenuBox">
    <hr/> 
    <input type="checkbox" id="MenuCheckBox2" />
    <label htmlFor="MenuCheckBox2" className="MenuName">菜单二</label>
    <div className="MenuList">
        <li className="MenuItem">子菜单</li>
        <li className="MenuItem">子菜单</li>
        <li className="MenuItem">子菜单</li>
    </div>
</ul>
</div>

CSS代码：

.MenuBody{
    width:13em;
    background-color: rgb(243, 243, 243);
    height: 100%;
    border-right: rgb(168, 168, 168) solid 1px;
    cursor:default;
    box-sizing:border-box
}
.MenuBox{
    display: flex;
    flex-direction: column;
}
.MenuName{
    margin: 0em;
    padding: .6em;
    padding-left: 2em;
    transition:all 0.5s;
}
.MenuName:hover{
    background-color: rgb(199, 199, 199);
    padding-left: 2.3em;
    transition:all 0.5s ;
}
.MenuName::after{
    content: '';
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid rgb(109, 109, 109);
    position: absolute;
    margin-left: 6em;
    margin-top: .5em;
    transform: rotate(0deg);
    transition:margin-left 0.5s,transform 0.2s ;
}
.MenuName:hover::after{
    margin-left: 5.7em;
}
.MenuBox input{
    display: none;
}
.MenuBox hr{
    border: none;
    height: 1px;
}
.MenuList{
    max-height: 0;
    overflow: hidden;
    transition:all 0.5s ;
}
input:checked + .MenuName {
    background-color: rgb(211, 222, 224);
}
input:checked + .MenuName::after {
    transform: rotate(90deg);
}
input:checked ~ .MenuList {
    max-height: 20em;
    background-color: rgb(217, 225, 228);
    transition:all 0.5s ease-in;
}
input:checked ~ .MenuList .MenuItem{
    padding:7px 0 7px 40px;
    transition-delay: 0s;
}
.MenuItem{
    font-size: 1em;
    margin: 0px 0;
    padding:7px 0 7px 25px;
    transition:all 0.5s;
    transition-delay: 0.5s;
}
.MenuItem:hover{
    background-color: rgb(199, 199, 199);
}

Q.E.D.

随意游世