Javascript 鼠标单击时折叠箭头

我有一个鼠标点击折叠行的例子：

jsfiddle.net/7bz5au97/

我想问你，我如何在问题的开头添加箭头，并在问题展开时旋转箭头

---

这只能用CSS来完成，还是我还需要添加JavaScript？

这里是您的JSFIDLE的更新

我刚才补充说

$('body').click(function() {
$( 'img' ).toggleClass('rotate');
});

---

旋转到img

你可以用CSS做一个简单的三角形，但是如果你想要像图像中那样的圆角，它会变得复杂

更别致的CSS形状

$（函数（）{
$（'span'）。单击（函数（）{
$（this.toggleClass（'expanded'）；
$（'p'）.toggleClass（'expanded'）；
});
});
p:未（.expanded）{
显示：无；
}
跨度{
显示：块；
宽度：0；
身高：0；
光标：指针；
边框顶部：10px实心透明；
边框底部：10px实心透明；
左边框：20px纯黑；
}
span.扩展{
左边框：10px实心透明；
右边框：10px实心透明；
边框顶部：20px纯黑；
}

您好
为了将来的参考，这里有一个不需要javascript的版本：


。单行输入[type=“radio”]{
显示：无；
}
.介绍{
显示块；
}
.简介{
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
-o变换：旋转（-90度）；
变换：旋转（-90度）；
-webkit转换：-webkit转换250ms易入易出；
-moz转换：-moz转换250ms输入输出；
-o型转换：-o型转换250ms输入输出；
转换：转换250ms缓进缓出；
}
.内容{
最大高度：0；
溢出：隐藏；
-webkit过渡：最大高度250ms，易于进出；
-moz过渡：最大高度250ms，易于输入输出；
-o型过渡：最大高度250ms，易于进出；
过渡：最大高度250ms，易于进出；
}
.opener:选中+标签.content{
显示：块；
最大高度：100px；
}
.opener:选中+标签.intro.fa{
-webkit变换：旋转（0）；
-moz变换：旋转（0）；
-o变换：旋转（0）；
变换：旋转（0）；
}

导言1

下面是一些文字

导言2

下面是一些文字

导言3

下面是一些文字

您几乎完全可以使用css来实现这一点：


var arr=document.querySelector（'.arrow'）；
arr.addEventListener（'click'，函数（事件）{
event.target.classList.toggle（'down'）；
});
.arrow{
边缘：1米；
}
.阿罗：以前{
位置：绝对位置；
内容：''；
宽度：0；
身高：0；
边框：.5em实心透明；
左边框颜色：灰色；
变换原点：0.50%；
转变：转变.25s；
}
.arrow.down：：之前{
变换：旋转（90度）；
转变：转变.25s；
}
一个没有图像的简单CSS解决方案
要求：
“我想问你如何在问题的开头添加箭头，并在问题展开时旋转箭头？”

对于像这样的简单弹出信息，可以使用CSS来完成所有操作。。。没有任何脚本。和unicode箭头▶ 将代替加载图像和进行图像变换。我只是把它作为一种选择

运行要测试的代码段

保险商实验室{
列表样式：无；
字体大小：16px；
字体系列：无衬线；
}
李：以前{
内容：“▶ ";
字体大小：1.2米；
}
李：悬停：：之前{
内容：“▼ ";
颜色：红色；
}
李>司{
边缘：0.5em；
显示：无；
}
li：悬停>div{
显示：块；
身高：5公分；
宽度：20em；
边框：1px灰点；
填充：1em；
背景色：鬼影白；
}
例子

Q1：我可以在购买之前试用一下这个软件吗？
是的！只需下载免费试用版，您就可以
绝对可以在30天内即时访问所有功能
免费。我们不需要您的信用卡详细信息或任何其他信息
承诺。
问题2：我可以在购买之前试用一下这个软件吗？
是的！只需下载免费试用版，您就可以
绝对可以在30天内即时访问所有功能
免费。我们不需要您的信用卡详细信息或任何其他信息
承诺。
问题3：我可以在购买前试用一下这个软件吗？
是的！只需下载免费试用版，您就可以
绝对可以在30天内即时访问所有功能
免费。我们不需要您的信用卡详细信息或任何其他信息
承诺。

视情况而定，HTML与您在jsfidlle中的HTML完全相同，还是您要编写一个新的HTML？都是一样的。我只需更改内容。另外，您是否确实希望在“展开切换”动画期间旋转图像，还是将其切换为相反的状态？是的！这正是我想要的！您能告诉我如何替换HTML吗请使用纯CSS代码的图像？只需使用div更改img，然后我在itI上放置一个背景图像。我的意思是完全删除图像并用CSS生成的图像替换它。我不明白你的意思，你可以自己尝试这样做，或者问一个其他问题。这真的有必要吗？你的小提琴已经展示了jQuery的经验。所有这一切都需要es是一个拷贝粘贴和小改动。我可以，但是我们需要你做什么呢？我用这种方式更新了代码，但它不能正常工作