【Js实现侧边栏-手风琴效果-带选择小箭头】
效果展示:
动作效果描述:
第一次,点击 二级标题,小箭头 ----顺时针旋转----90度,风琴列表弹出;
第二次,点击二级标题,小箭头 ----逆时针旋转----90度,风琴列表收起;
CSS样式代码:
/**基础样式**/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th {
margin: 0;
padding: 0;
border: 0px;
}
ul,ol,li{list-style:none; float:left;}
a:link,a:visited,a:hover,a:active{text-decoration:none; cursor:pointer;}
body{width: 1200px;margin: 0 auto;}
.fl{float:left;}
/*基础样式end*/
/*列表样式*/
.ny-left{width:230px;background:url(../images/left.jpg) no-repeat;min-height:500px;}
.lmcc{width:198px; padding-left:32px; color:#fff; font-size:16px; background:#092b6e; height:50px; line-height:50px;}
.ejdh li a{width:180px; height:43px; line-height:43px; background:#e4e4e4 no-repeat 32px center; color:#092b6e; font-size:14px; display:block; float:left; padding-left:50px; border-bottom:1px solid #edf0f5;}
.ejdh li a:hover,.left-current{background:#61759d no-repeat 32px center!important; color:#fff!important;}
/*手风琴动画样式*/
.submenu {
content: " ";
}
.submenu li {
width: 221px;
margin-left: 6px;
border-left: solid 3px #284c95;
transition: border-left 220ms ease-in;
}
.submenu li a{
width: 171px;
}
/*下拉箭头样式*/
.xljt {
display: inline-block;
width: 44px;
height: 44px;
line-height: 44px;
float: right;
transition: transform 0.4s linear;
}
html标签代码:
<body>
<div class="ny-left fl">
<div class="lmcc fl">培养管理</div>
<div class="ejdh fl">
<ul class="container">
<li>
<li class="xlmenu">
<a>培养方案<img class="xljt" src="../images/xljtl.png" style="transform: rotate(0deg);"></a>
</li>
<ul class="submenu">
<li><a href="#">博士</a></li>
<li><a href="#">硕士</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
Js代码:
<script src="../js/jquery.min.js"></script>
<script>
$(document).ready( function() {
var $submenu = $('.submenu');
var $mainmenu = $('.container');
var $xljt = $(".xljt");
$submenu.hide();
//$submenu.first().delay(400).slideDown(700);
$submenu.on('click','li', function() {
$submenu.siblings().find('li').removeClass('chosen');
$(this).addClass('chosen');
});
$mainmenu.on('click', 'li', function() {
$(this).next('.submenu').slideToggle().siblings('.submenu').slideUp();
});
//下拉箭头旋转代码
$(".xlmenu").on("click",function(){
if($(this).children().children()[0].style.transform==="rotate(90deg)") {
$(this).children().children().css({transform: "rotate("+0+"deg)"});
}
else if($(this).children().children()[0].style.transform==="rotate(0deg)"){
$(this).children().children().css({transform:"rotate("+90+"deg)"});
};
});
});
</script>
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**基础样式**/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th {
margin: 0;
padding: 0;
border: 0px;
}
ul,ol,li{list-style:none; float:left;}
a:link,a:visited,a:hover,a:active{text-decoration:none; cursor:pointer;}
body{width: 1200px;margin: 0 auto;}
.fl{float:left;}
/*基础样式end*/
/*列表样式*/
.ny-left{width:230px;background:url(../images/left.jpg) no-repeat;min-height:500px;}
.lmcc{width:198px; padding-left:32px; color:#fff; font-size:16px; background:#092b6e; height:50px; line-height:50px;}
.ejdh li a{width:180px; height:43px; line-height:43px; background:#e4e4e4 no-repeat 32px center; color:#092b6e; font-size:14px; display:block; float:left; padding-left:50px; border-bottom:1px solid #edf0f5;}
.ejdh li a:hover,.left-current{background:#61759d no-repeat 32px center!important; color:#fff!important;}
/*手风琴动画样式*/
.submenu {
content: " ";
}
.submenu li {
width: 221px;
margin-left: 6px;
border-left: solid 3px #284c95;
transition: border-left 220ms ease-in;
}
.submenu li a{
width: 171px;
}
/*下拉箭头样式*/
.xljt {
display: inline-block;
width: 44px;
height: 44px;
line-height: 44px;
float: right;
transition: transform 0.4s linear;
}
</style>
<script src="../js/jquery.min.js"></script>
<script>
$(document).ready( function() {
var $submenu = $('.submenu');
var $mainmenu = $('.container');
var $xljt = $(".xljt");
$submenu.hide();
//$submenu.first().delay(400).slideDown(700);
$submenu.on('click','li', function() {
$submenu.siblings().find('li').removeClass('chosen');
$(this).addClass('chosen');
});
$mainmenu.on('click', 'li', function() {
$(this).next('.submenu').slideToggle().siblings('.submenu').slideUp();
});
//下拉箭头旋转代码
$(".xlmenu").on("click",function(){
if($(this).children().children()[0].style.transform==="rotate(90deg)") {
$(this).children().children().css({transform: "rotate("+0+"deg)"});
}
else if($(this).children().children()[0].style.transform==="rotate(0deg)"){
$(this).children().children().css({transform:"rotate("+90+"deg)"});
};
});
});
</script>
</head>
<body>
<h2 style="text-align: center;margin: 5px;">手风琴效果</h2>
<div class="ny-left fl">
<div class="lmcc fl">培养管理</div>
<div class="ejdh fl">
<ul class="container">
<li>
<li class="xlmenu">
<a>培养方案<img class="xljt" src="../images/xljtl.png" style="transform: rotate(0deg);"></a>
</li>
<ul class="submenu">
<li><a href="#">博士</a></li>
<li><a href="#">硕士</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>