<body>
<ul>
<li>
<div>员工管理</div>
<ul class="menu">
<li>员工1</li>
<li>员工2</li>
</ul>
</li>
<li>
<div>部门信息</div>
<ul class="menu">
<li>部门1</li>
<li>部门2</li>
</ul>
</li>
<li>
<div>生产管理</div>
<ul class="menu">
<li>生产1</li>
<li>生产2</li>
</ul>
</li>
</ul>
</body>
<script src="js/js/jquery-1.12.4.min.js"></script>
<script src="js/js/jquery.easing.1.3.js"></script>
<script>
$('.menu').css('display','none');//选择类名为menu的标签添加样式
$('.menu:first').css('display','block');//选择类名为menu的第一个标签添加样式
//给div添加点击事件
$('div').on('click',function(){
var ul=$($(this).siblings()[0]);//除了div以外的第一个标签
// if(ul.css('display')=='none'){
// ul.css('display','block').show(2000);
// }
// else if(ul.css('display')=='block'){
// ul.css('display','none').show(2000);
// }
// else{
// ul.css('display','none').show(2000);
// }
// if(this.isClose||this.isClose==undefined){
// this.isClose=false;//打开
// $($(this).siblings()[0]).show(2000,function(){
// console.log('显示完成');
// });
// }
// else{
// this.isClose=true;//关闭
// $($(this).siblings()[0]).hide('slow',function(){
// console.log('关闭完成');
// });
// }
//这一句直接代替上面的一大堆!
//滑入滑出
//$($(this).siblings()[0]).slideToggle('slow');
//淡入淡出
//$($(this).siblings()[0]).fadeToggle('slow');//淡入淡出结合
if(ul.css('display')=='none'){
ul.fadeIn('slow');//淡入
ul.css('display','block');
}
else if(ul.css('display')=='block'){
ul.fadeOut('slow');//淡入
ul.css('display','none');
}
//$($(this).siblings()[0]).fadeOut('slow');//淡出
});
</script>
jq 手风琴(淡入淡出)
最新推荐文章于 2022-10-10 07:00:00 发布