jQuery实现手风琴效果
2021-03-30 10:27
标签：ddc abs lse ice har div font last 手风琴效果 1.创建测试页面 2.jquery实现手风琴效果 3.运行效果 参考文章： https://www.jb51.net/article/146499.htm https://www.cnblogs.com/Fooo/p/9992409.html jQuery实现手风琴效果 标签：ddc abs lse ice har div font last 手风琴效果 原文地址：https://www.cnblogs.com/YorkZhangYang/p/12595862.htmlDOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
title>手风琴效果title>
script src="js/jquery-3.4.1.js">script>
style>
ul,li,h4{
margin: 0;
padding: 0;
}
.left{
width: 160px;
height: auto;
float: left;
}
ul.menu{
width: 100%;
float: left;
}
ul.menu>li{
list-style: none;
position: relative;
background:#E4644B;
text-align: center;
line-height: 22px;
border-bottom: solid 1px #DED;
}
ul.menu>li:last-child{
border-bottom: none;
}
ul.menu>li ul li{
padding: 5px 0;
}
.right{
width: 500px;
background-color: rgb(250, 244, 244);
}
ul.menu>li span{
position: absolute;
top: 5px;
right: 3px;
font-size: 22px;
}
ul.menu>li h4{
padding:8px 0;
}
ul.menu>li .child_ul{
background: #fff;
display: none;
}
.selected{
background: rgb(184, 184, 184);
}
style>
head>
body>
div class="wrapper">
div class="left">
ul class="menu">
li>
h4>Javah4>
span>+span>
ul class="child_ul">
li>a href="#">java sea>li>
li>a href="#">java sea>li>
li>a href="#">java sea>li>
ul>
li>
li>
h4>c#h4>
span>+span>
ul class="child_ul">
li>a href="#"> winforma>li>
li>a href="#"> winforma>li>
li>a href="#"> winforma>li>
ul>
li>
ul>
div>
div id="right">
div>
div>
body>
html>
上一篇：Web 标准制定流程