通过css和jQuery实现手风琴菜单效果
在做管理系统时经常会用到点击展开，再次点击关闭的菜单效果，通常有很多的插件来实现，但是效果实现了，由于引入了大量的外部文件，导致项目本来内容就多，变得更多了，不利于项目的代码管理。下面我来介绍一个简单的方法来实现这种效果。
先看一下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);
}代码就只有这么多，使用起来很方便，而且有了问题也可以知道是哪里的问题，使用方便简单。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-04-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读