如何使用jQuery切换加号和减号图标？
如何使用jQuery切换加号和减号图标？
提问于 2020-11-19 00:39:18
我想切换guide-content目录，并将+图标更改为-图标，然后再次将-更改为+图标。为了做到这一点，我有这个jQuery和HTML：
$(document).ready(function() {
$(".collapse").click(function() {
$(this).parents().next(".guide-content").toggle();
$(this).text("+");
}, function() {
$(this).text("-");
$(this).parents().next(".guide-content").toggle();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="guide-collapse">
<div class="guide-title">
<h2>アンティーク着物について <span class="collapse">+</span></h2>
</div>
<div class="guide-content">
</div>
</div>
<div class="guide-collapse">
<div class="guide-title">
<h2>アンティーク着物について <span class="collapse">+</span></h2>
</div>
<div class="guide-content">
</div>
</div>
但它不会将图标从+更改为-，再更改为+。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-11-19 00:50:54
我会根据一个类使用CSS来切换它。
这将允许您使用图标以获得更多细节和灵活性。
$('body').on('click', '.collapse', function(event) {
$(this).toggleClass('isActive');
});Stack Overflow用户
发布于 2020-11-19 00:48:31
如果您想要切换行为，请将JS代码更改为以下代码：
$(document).ready(function() {
$(".collapse").click(function() {
$(this).parents().next(".guide-content").toggle();
if($(this).text() == "+"){
$(this).text("-");
}
else {
$(this).text("+");
}
});
});每次单击时，这会将文本更改为"+“(如果是"-”)和"-“(如果是"+”)。
Stack Overflow用户
发布于 2020-11-19 00:47:16
我不完全确定您的意图，但一种策略是只使用两个元素，其中一个元素隐藏，然后切换两个元素：
$(document).ready(function() {
$(".guide-collapse").click(function() {
$(this).find('h2 span').toggle();
$(this).find('.guide-content').slideToggle();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="guide-collapse">
<div class="guide-title">
<h2>アンティーク着物について <span class="collapse">+</span><span class="collapse" style="display: none;">-</span></h2>
</div>
<div class="guide-content" style="display: none;">Guide content here.</div>
</div>
<div class="guide-collapse">
<div class="guide-title">
<h2>アンティーク着物について <span class="collapse">+</span><span class="collapse" style="display: none;">-</span></h2>
</div>
<div class="guide-content" style="display: none;">Guide content here.</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64897392
复制相关文章
相似问题
腾讯云开发者
