您正在使用 IPV4 [44.221.73.157] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价      
[公益] 地球是我家,绿化靠大家      
2024年 七夕节 056
2025年 高 考 357
2025年 元 旦 200
2025年 春 节 228
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
JS实现鼠标点击箭头旋转180度功能
内容摘要: div@click='showChecklist'class='checkCLasscurpr-20pxpl-20pxpaflexai-center'span{{checkListStatus()}}/spanpclass='trangle'/p/div下面是三角形状的样式.trangle{width:0;transition:all0.2sease-in;......
<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的点击事件

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:让你的网页动起来:Javascript+CSS拖曳盒子指南

 

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

发布日期:2024/4/7
手机扫二维码直达本页
发布时间:20:43:13
点  击:10
录  入:伊伊
相关文章
Baidu
YiJiaCMS 7.5.1 build240527(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....