使用jQuery切换加号和减号图标可以通过以下步骤实现:
<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
<button id="toggleButton">切换图标</button>
.click()
方法添加点击事件处理程序。$(document).ready(function() {
$('#toggleButton').click(function() {
// 切换图标的代码
});
});
.toggleClass()
方法切换元素的CSS类,从而切换图标。$(document).ready(function() {
$('#toggleButton').click(function() {
$(this).toggleClass('plus minus');
});
});
.plus::after {
content: '+';
}
.minus::after {
content: '-';
}
完成以上步骤后,点击切换图标的元素时,它的CSS类将切换为plus
或minus
,从而切换图标显示为加号或减号。
这种方法可以适用于各种场景,例如折叠面板、展开列表等需要切换图标的情况。
领取专属 10元无门槛券
手把手带您无忧上云