<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的点击事件

下一篇：纯 CSS 实现多标签自动显示超出数量的思路详解