JS实现鼠标点击箭头旋转180度功能

2024-03-01 0 976

JS实现鼠标点击箭头旋转180度功能

效果:

JS实现鼠标点击箭头旋转180度功能

<div @click=\”showChecklist\” class=\”checkCLass cur pr-20px pl-20px pa flex ai-center\”>
<span>{{ checkListStatus() }}</span>
<p class=\”trangle\”></p>
</div>

下面是三角形状的样式

.trangle {
width: 0;
transition: all 0.2s ease-in;
height: 0;
border-bottom: 0 solid transparent;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
border-top: 6px solid #fff;
}
.rotateBottom {
transform: rotate(-180deg);
}

点击,三角按钮旋转180度

const showChecklist = () => {
const dom = 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方法。

var btn=document.getElementById(\”myBtn\”);
var event = new MouseEvent(\”click\”);
btn.dispatchEvent(event); // 触发myBtn的点击事件

到此这篇关于JS实现鼠标点击箭头旋转180度的文章就介绍到这了,更多相关js箭头旋转180度内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • Vue实现按钮旋转和移动位置的实例代码

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript JS实现鼠标点击箭头旋转180度功能 https://www.u-9.cn/biancheng/javascript/181840.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务