JQuery实现折叠菜单，包括三角的方向

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;">&nbsp
  <img style="display:inline-block;" src='img/jiaosan.png'>&nbsp&nbsp新闻管理</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;">&nbsp
    <img style="display:inline-block;" src='img/jiaosan.png'>&nbsp&nbsp分类管理</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;">&nbsp
 <img style="display:inline-block;" src='img/jiaosan.png'>&nbsp&nbsp用户管理</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方向朝下