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

間諜

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

效果：

1. <div @click="showChecklist" class="checkCLass cur pr-20px pl-20px pa flex ai-center">
   
2.      <span>{{ checkListStatus() }}</span>
   
3.      <p class="trangle"></p>
   
4. </div>

复制代码

下面是三角形状的样式

1.   .trangle {
   
2.     width: 0;
   
3.     transition: all 0.2s ease-in;
   
4.     height: 0;
   
5.     border-bottom: 0 solid transparent;
   
6.     border-right: 6px solid transparent;
   
7.     border-left: 6px solid transparent;
   
8.     border-top: 6px solid #fff;
   
9.   }
   
10.   .rotateBottom {
    
11.     transform: rotate(-180deg);
    
12.   }

复制代码

点击，三角按钮旋转180度

1. const showChecklist = () => {
   
2.   const dom = document.querySelector(".trangle");
   
3.   if (!isShowChecklist.value) {
   
4.     dom?.classList.add("rotateBottom");
   
5.   } else {
   
6.     dom?.classList.remove("rotateBottom");
   
7.   }
   
8.   isShowChecklist.value = !isShowChecklist.value;
   
9. };

复制代码

补充：
原生js自动触发点击事件

主动触发事件：使用dispatchEvent方法
该方法能模拟用户行为，如点击（click）操作等。 标准使用dispatchEvent方法，IE6/7/8则使用fireEvent方法。

1. var btn=document.getElementById("myBtn");
   
2. var event = new MouseEvent("click");
   
3. btn.dispatchEvent(event); // 触发myBtn的点击事件

复制代码

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

来源:https://www.jb51.net/javascript/316247n65.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！