jQuery操作伪元素——toggleClass添加新类

给若干三角形形状的伪元素添加点击事件，可以进行90度来回旋转。

由于伪元素不是DOM节点，所以用添加新类的方式实现。

HTML+CSS如下：

 1 HTML：
 2 <details>
 3     <summary class="summary">1</summary>
 4 </details>
 5 <details>
 6     <summary class="summary">2</summary>
 7 </details>
 8 <details>
 9     <summary class="summary">3</summary>
10 </details>
11 
12 CSS：
13 .summary::after {
14     content: '';
15     position: absolute;
16     top: 18px;
17     right: 23px;
18     display: inline-block;
19     width: 10px;
20     height: 10px;
21     border-right: 3px solid #ffffff;
22     border-bottom: 3px solid #ffffff;
23     transform: rotate(-45deg);
24     transition: transform .5s;
25 }

此时三角向右。

将要添加的新类：

1 .change::after{
2     transform: rotate(45deg)!important;
3     transition: transform .5s;
4 }

transform添加!important解决权重问题。

jQuery如下，一行代码非常完美的制作出了效果：

1 $("summary").on("click",function(){
2     //第一行代码实现菜单的缓出缓入，注意将结构写在details外之下。
3     //$(this).parent().next().stop().slideToggle(300);
4     $(this).toggleClass("change");
5 })

 

posted @ 2021-08-06 23:01  凉风時雨  阅读(392)  评论(0)  编辑  收藏  举报