首頁猿問引導...

引導 4：在前循環中將一個圖標與另一個圖標交換的最佳方式是什么？

PHP

30秒到達戰場 2022-09-30 16:25:09

我想在使用折疊時交換，在使用foreach循環時沒有每個圖標同時切換。fa fa-plusfa fa-minus這是我的代碼演示。<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><div class="container h-100"> <div class="row no-gutters border-0 rounded align-items-center mt-3"> <div class="col-sm-4">demo 1</div> <div class="col-sm-4">demo 1</div> <div class="col-sm-3">demo 1</div> <div class="col-sm-1 "> <a class="fa fa-plus" data-toggle="collapse" href="#collapse1" aria-expanded="true" aria-controls="collapse1"></a> </div> </div> <div class="collapse" id="collapse1"> <div class="row no-gutters border-0 rounded align-items-center mt-3"> <div class="col-sm-4">demo 1</div> <div class="col-sm-4">demo 1</div> <div class="col-sm-4">demo 1</div> </div> </div> <div class="row no-gutters border-0 rounded align-items-center mt-3"> <div class="col-sm-4">demo 2</div> <div class="col-sm-4">demo 2</div> <div class="col-sm-3">demo 2</div> <div class="col-sm-1 "> <a class="fa fa-plus" data-toggle="collapse" href="#collapse2" aria-expanded="true" aria-controls="collapse2"></a> </div> </div>https://codepen.io/benwhittaker25/pen/rNVWyby在引導 4.4 中實現此目的的最佳方法是什么？

查看完整描述

2 回答

紅顏莎娜

TA貢獻1842條經驗獲得超13個贊

您可以在單擊按鈕時使用事件 Bootstrap 觸發器來執行此操作：

$('.collapse').on('show.bs.collapse hide.bs.collapse', function () {

// Find the corresponding button

var $btn = $('[data-toggle="collapse"][href="#' + this.id + '"]');

// Find the corresponding row

var $row = $btn.closest('.row');

// Toggle classes

$btn.toggleClass('fa-minus fa-plus');

$row.toggleClass('rounded rounded-top');

});

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

反對回復 2022-09-30

慕標琳琳

TA貢獻1830條經驗獲得超9個贊

優雅的方法是做blex所展示的jquery方式。但是你也可以綁定一個點擊函數，就像下面的javascript方式一樣：

function toggleClass(item){

if(item.classList.contains('fa-plus')){

item.classList.remove('fa-plus');

item.classList.add('fa-minus');

}else{

item.classList.remove('fa-minus');

item.classList.add('fa-plus');

}

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

反對回復 2022-09-30

2 回答
0 關注
111 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

引導 4：在前循環中將一個圖標與另一個圖標交換的最佳方式是什么？

引導 4：在前循環中將一個圖標與另一個圖標交換的最佳方式是什么？

2 回答

添加回答

引導 4：在前循環中將一個圖標與另一個圖標交換的最佳方式是什么？

引導 4：在前循環中將一個圖標與另一個圖標交換的最佳方式是什么？