3 回答

TA貢獻1798條經(jīng)驗 獲得超7個贊
我會使用 CSS 根據(jù)類來切換它。
這將允許您使用圖標來獲得更多細節(jié)和靈活性。
$('body').on('click', '.collapse', function(event) {
$(this).toggleClass('isActive');
});

TA貢獻1796條經(jīng)驗 獲得超7個贊
如果您想要切換行為,請將 JS 代碼更改為以下內(nèi)容:
$(document).ready(function() {
$(".collapse").click(function() {
$(this).parents().next(".guide-content").toggle();
if($(this).text() == "+"){
$(this).text("-");
}
else {
$(this).text("+");
}
});
});
每次單擊時,如果文本為“-”,則文本將更改為“+”;如果文本為“+”,則文本將更改為“-”。

TA貢獻1860條經(jīng)驗 獲得超8個贊
我不完全確定您的意圖,但一種策略是僅使用兩個元素,其中一個元素隱藏并切換兩者:
$(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>
添加回答
舉報