<div@click="showChecklist"class="checkCLasscurpr-20pxpl-20pxpaflexai-center">
<span>{{checkListStatus()}}</span>
<pclass="trangle"></p>
</div>
下面是三角形状的样式
.trangle{
width:0;
transition:all0.2sease-in;
height:0;
border-bottom:0solidtransparent;
border-right:6pxsolidtransparent;
border-left:6pxsolidtransparent;
border-top:6pxsolid#fff;
}
.rotateBottom{
transform:rotate(-180deg);
}
点击,三角按钮旋转180度
constshowChecklist=()=>{
constdom=document.querySelector(".trangle");
if(!isShowChecklist.value){
dom?.classList.add("rotateBottom");
}else{
dom?.classList.remove("rotateBottom");
}
isShowChecklist.value=!isShowChecklist.value;
};
补充:
原生js自动触发点击事件
主动触发事件:使用dispatchEvent方法
该方法能模拟用户行为,如点击(click)操作等。标准使用dispatchEvent方法,IE6/7/8则使用fireEvent方法。
varbtn=document.getElementById("myBtn");
varevent=newMouseEvent("click");
btn.dispatchEvent(event);//触发myBtn的点击事件
|