JQuery实现折叠菜单包括三角形的方向变化
<style>
.ul2 li{cursor:pointer;height:40px;border-radius:6px;
width:150px;background-color:rgb(64, 201, 255);text-align:center;
list-style: none;margin-top: 5px;box-shadow: 2px 2px 2px #4682B4;
}
.box,.box1{list-style: none;box-shadow: 2px 2px 2px #4682B4;}
.box,.box1{width:150px;height: 40px;background: #1E90FF;display:inline-block;text-decoration:none;color:black;border-radius: 6px;}
.box img{width:30px;height: 30px;}
.ul2 a{text-decoration: none;color:black;user-select:none;line-height: 40px;text-align: center;}
.ul2{width:200px}
.li2{position: relative;}
</style>
<div class="dv" style="position:relative;left:-70px;top:50px" >
<ul style="">
<ul style="cursor: pointer;user-select:none;height:40px;border-radius: 5px;width:150px">
<li class="box" style="display:inline-block;display:flex;align-items: center;position: relative;"> 
<img style="display:inline-block;" src='img/jiaosan.png'>  新闻管理</li>
</ul>
<ul class="ul2">
<a href=list.php target="main"><li class="li2">新闻总览</li></a>
<a href=admin_news_add.php target="main"><li class="li2">添加新闻</li></a>
<a href=newsxg.php target="main"><li class="li2">修改新闻</li></a>
<a href=newsdel.php target="main"><li class="li2">删除新闻</li></a>
</ul>
</ul>
<ul style="">
<ul style="cursor: pointer;user-select:none;height:40px;border-radius: 5px;width:150px">
<li class="box" style="display:inline-block;display:flex;align-items: center;position: relative;"> 
<img style="display:inline-block;" src='img/jiaosan.png'>  分类管理</li>
</ul>
<ul class="ul2">
<a href=classshow.php target="main"><li class="li2">分类总览</li></a>
<a href=addclass.php target="main"><li class="li2">添加分类</li></a>
<a href=classxg.php target="main"><li class="li2">修改分类</li></a>
<a href=classdel.php target="main"><li class="li2">删除分类</li></a>
</ul>
</ul>
<ul >
<ul style="cursor: pointer;user-select:none;height:40px;border-radius: 5px;width:150px">
<li class="box" style="display:inline-block;display:flex;align-items: center;position: relative;"> 
<img style="display:inline-block;" src='img/jiaosan.png'>  用户管理</li>
</ul>
<ul class="ul2">
<a href= usershow.php target="main"><li class="li2">用户总览</li></a>
<a href= adduser.php target="main"><li class="li2">添加用户</li></a>
<a href=userxg.php target="main"><li class="li2">修改用户</li></a>
<a href=userdel.php target="main"><li class="li2">删除用户</li></a>
</ul>
</ul>
<script>
$(function () {
var sh=0;
$('.ul2').hide();
$('.box').click(function () {
sh++;
$(this).parent('ul').next('.ul2').toggle().end().parent('ul').siblings('ul').find('.ul2').hide().end().siblings('ul').find('img').attr('src','img/jiaosan.png');
$('.box1').find('img').attr('src','img/tuichu.png');
//if(sh%2=='1'){$(this).children('img').attr('src','img/sanjiao.png');}else {$(this).children('img').attr('src','img/jiaosan.png')}
if($(this).parent('ul').next('.ul2').css('display')=='block'){$(this).find('img').attr('src','img/sanjiao.png')}
});
/*
$('.box').click(function () {
if($('.box').parent('ul').next('.ul2').attr('display','block')){$(this).children('img').attr('src','img/sanjiao.png')}//selse {$(this).children('img').attr('src','img/jiaosan.png')}
});*/
$('.box').click(function () {
});
$('.li2').mousedown(function(){
$(this).css('box-shadow','2px 2px 2px #4682B4 inset')
})
$('.li2').on('mouseup mouseleave',function(){
$(this).css('box-shadow','2px 2px 2px #4682B4 ')
});
$('.box').on('mouseup mouseleave',function(){
$(this).css('box-shadow','2px 2px 2px #4682B4 ');
});
//$('.box').on('mouseout',function(){$(this).animate({'left':'-=1px','top':'-=1px'},10)});
$('.box').mousedown(function(){
$(this).css('box-shadow','2px 2px 2px #4682B4 inset')
})
$('.box1').on('mouseup mouseleave',function(){
$(this).css('box-shadow','2px 2px 2px #4682B4 ');
});
//$('.box').on('mouseout',function(){$(this).animate({'left':'-=1px','top':'-=1px'},10)});
$('.box1').mousedown(function(){
$(this).css('box-shadow','2px 2px 2px #4682B4 inset')
})
/**/
/*
if($('.box').children('ul').show()){
$(this).find('img').animate({
'transform':'rotate (-90deg)'
},200)
}*/
})
</script>
大家可以找张三角图片,其中jiaosan.png方向朝右,sanjiao.png方向朝下