JS点击下三角显示菜单，再次点击收回菜单

html

<div id="div-info">
<ul id="infoul">
<li id="personal-center">
<img src="picture/头像.png" alt="" width="40" height="40">
<img src="picture/下三角.png" alt="" width="20" height="20" id="sanjiao">
</li>
<li id="ssj"></li>
<li class="infoli"><a href="">个人空间</a></li>
<li class="infoli"><a href="myorder.html">我的订单</a></li>
<li class="infoli"><a href="">退出登录</a></li>
</ul>
</div>

js

//下三角点击事件
var sanjiaoclick = function(){
var sj = this.document.getElementById("sanjiao")
var infoli = this.document.getElementsByClassName("infoli")
var ssj = this.document.getElementById("ssj")
var count = 0;
this.document.addEventListener("click",function(e){
if(e.target.id == "sanjiao" && count == 0) {
count++;
ssj.style.display = "block"
infoli[0].style.display = "block";
infoli[1].style.display = "block";
infoli[2].style.display = "block";
}else{
ssj.style.display = "none"
infoli[0].style.display = "none";
infoli[1].style.display = "none";
infoli[2].style.display = "none";
count = 0;
}

})
}

画三角形

#sanjiao{
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: rgb(136, 170, 241);
margin-left:20px;
border-radius:3px;
display: none;
}

• 点赞
• 收藏
• 分享
• 文章举报