在做管理系统时经常会用到点击展开,再次点击关闭的菜单效果,通常有很多的插件来实现,但是效果实现了,由于引入了大量的外部文件,导致项目本来内容就多,变得更多了,不利于项目的代码管理。下面我来介绍一个简单的方法来实现这种效果。
先看一下html代码:
<ul>
<li class="accordion">
<span class="left_right" style="font-weight:bold">My Account</span>
</li>
<li class="accordion-desc">
<a href='#'>My Profile</a>
<a href='#'>Change Password</a>
</li>
</ul>
代码中的li标签可以替换为其他的标签,外部也可以不使用ul标签,只要是内部可包含内容的标签即可。
再来看一下控制它的js代码:
<script>
$(document).ready(function() {
$(".accordion-desc").fadeOut(0);
$(".accordion").click(function() {
$(".accordion-desc").not($(this).next()).slideUp('fast');
$(this).next().slideToggle(400);
});
});
</script>
这段js代码添加到文档最下方即可。
再来看一下最主要的css样式:
.accordion{
cursor:pointer;
}
.accordion a {
position: relative;
display: block;
color: #74777b;
padding: 1em 1em 2.5em 1em;
text-decoration: none;
}
.accordion a:hover {
text-decoration: none;
color: #2cc185;
background-color: #e7ecea;
transition: 0.3s;
}
.accordion-desc {
background-color: #1A2127 !important;
color: #B7C8CF;
z-index: 2;
padding-left:0 !important;
padding-top: 10px;
padding-bottom: 10px;
}
.accordion-desc li{
margin-top:20px;
}
.accordion-desc a{
display: inline-block;
width: 100%;
text-align:center;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.accordion-desc a:hover{
transform: scale(1.20);
-webkit-transform:scale(1.20);
}
代码就只有这么多,使用起来很方便,而且有了问题也可以知道是哪里的问题,使用方便简单。