html - 如何在扩展/关闭下拉菜单时使用加号/减号圆

Question

我使用 font awesome CSS 在下拉菜单中显示加号圆圈，我想在下拉菜单展开时将其更改为减号，反之亦然。

任何例子都可能有帮助...谢谢

Answer 1

你可以创建一个 div 放置在你的下拉列表中，给它一个类“more-icon”，这将切换到“less-icon”(这个例子需要一个相对定位的父级)

.more-icon:after {
content: "+";
display: block;
position: absolute;
right: 10px;
top: 10px;
color: #373534;
font-size: 30px;
font-weight: 900;}


.less-icon:after {
content: "-";
width: 17px;
height: 4px;
display: block;
position: absolute;
right: 10px;
top: 15px;
background: #373534;
font-size: 30px;
font-weight: 900;}

然后，使用一些 jquery 在打开和折叠下拉菜单时在类之间切换 div:

$('.more-icon').toggleClass('less-icon');