[英]Change text in a bootstrap collapse button based on whether the element is collapsed
我在這里看到了一些關於此的線程,但是在擴展代碼以適合我的設計時遇到了問題。
我正在從此處使用“折疊”按鈕: http : //getbootstrap.com/javascript/#collapse
它們工作正常,但我希望根據元素的狀態更改文本和圖標。
最小化:顯示更多V展開:顯示更少^
我用2個腳本編寫了它,因為我對JavaScript非常了解:
<Script>
$(".collapse").click(function(){
$(this).hasClass("in")?true : (function(){
$(this).children("i").removeClass('fa-caret-down');
$(this).children("i").addClass('fa-caret-up');
}, function () {
$(this).children("i").removeClass('fa-caret-up');
$(this).children("i").addClass('fa-caret-down');
});
});
</script>
<Script>
$(".collapse").click(function(){
$(this).hasClass("in")?true : (function(){
$(this).children("i").removeClass('More');
$(this).children("i").addClass('Less');
}, function () {
$(this).children("i").removeClass('Less');
$(this).children("i").addClass('More');
});
});
</script>
元素的名稱是諸如fallingBech,collapseTrev等之類的所有東西。
這是我很想念的東西嗎?
HTML
<p class="text-justify">The cat sat on the mat</p>
<div class="collapse" id="collapseBech">
<p class="text-justify">The cat sat on the mat</p>
</div>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseBech" aria-expanded="false" aria-controls="collapseBech">
Read More <i class="fa fa-caret-down"></i>
</a>
<p class="text-justify">The cat sat on the mat</p>
<div class="collapse" id="collapseTrev">
<p class="text-justify">The cat sat on the mat</p>
</div>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseTrev" aria-expanded="false" aria-controls="collapseTrev">
Read More <i class="fa fa-caret-down"></i>
</a>
<p class="text-justify">The cat sat on the mat</p>
<div class="collapse" id="collapseNat">
<p class="text-justify">The cat sat on the mat</p>
</div>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseNat" aria-expanded="false" aria-controls="collapseNat">
Read More <i class="fa fa-caret-down"></i>
</a>
您使用三元運算符的方式不正確,您正在執行以下操作:
[condition]?true : [code_if_true] , [code_if_false];
但是正確的語法是:
[condition]? [code_if_true] : [code_if_false];
請注意,您不使用關鍵字“真”和冒號( :
)兩個代碼塊,而不是逗號分隔在你的代碼。
但是,您的代碼很長,因此三元運算符不是一個好主意,您應該使用簡單的if-else,例如:
編輯:
在上次編輯中看到您的HTML代碼后,我更改了下面的代碼。 問題是,當有人單擊具有類collapse
的元素時,您將觸發事件,但這是錯誤的,因為您單擊的按鈕不在.collapse
元素上:
$(".collapse").click(function(){}); // This is wrong
您需要為每個按鈕分配一個類,我們將其稱為clickable-butn
,以便稍后我們可以將.click()
事件應用於該類:
<p class="text-justify">The cat sat on the mat</p>
<div class="collapse" id="collapseBech">
<p class="text-justify">The cat sat on the mat</p>
</div>
<a class="btn btn-primary clickable-butn" role="button" data-toggle="collapse" href="#collapseBech" aria-expanded="false" aria-controls="collapseBech">
<span>Read More </span><i class="fa fa-caret-down"></i>
</a>
<p class="text-justify">The cat sat on the mat</p>
<div class="collapse" id="collapseTrev">
<p class="text-justify">The cat sat on the mat</p>
</div>
<a class="btn btn-primary clickable-butn" role="button" data-toggle="collapse" href="#collapseTrev" aria-expanded="false" aria-controls="collapseTrev">
<span>Read More </span><i class="fa fa-caret-down"></i>
</a>
<p class="text-justify">The cat sat on the mat</p>
<div class="collapse" id="collapseNat">
<p class="text-justify">The cat sat on the mat</p>
</div>
<a class="btn btn-primary clickable-butn" role="button" data-toggle="collapse" href="#collapseNat" aria-expanded="false" aria-controls="collapseNat">
<span>Read More </span><i class="fa fa-caret-down"></i>
</a>
<div id="output">
</div>
現在,讓我們檢查一下代碼的樣子:
$(".clickable-butn").click(function(){
// now, $(this) is the button we just clicked...
// Now let's find the id of the .collapse element that is associated to $(this) button
var idOfCollapse = $(this).attr("href");
// now that we know its id, we can check if it is visible
// note that we are checking if it was visible BEFORE the click...
if($(idOfCollapse).is(":visible")){
$(this).children("span").text($(this).children("span").text().replace("Less", "More"));
$(this).children("i").removeClass('fa-caret-down');
$(this).children("i").addClass('fa-caret-up');
} else {
$(this).children("span").text($(this).children("span").text().replace("More", "Less"));
$(this).children("i").removeClass('fa-caret-up');
$(this).children("i").addClass('fa-caret-down');
}
});
您將看到單擊按鈕時,文本從“閱讀更多”更改為“閱讀較少”,反之亦然。
您可以使用內置的Bootstrap的折疊事件
$('#collapseBech, #collapseTrev, #collapseNat').on('hide.bs.collapse', function () {
// do something…
$(this).next("a").css({"background": "#ff0000"});
$(this).next("a").children("i").removeClass('More').addClass('Less').removeClass('fa-caret-down').addClass('fa-caret-up');
});
$('#collapseBech, #collapseTrev, #collapseNat').on('show.bs.collapse', function () {
// do something…
$(this).next("a").css({"background": "#00ff00"});
});
試試這個演示
jsfiddle.net/my9z7zhc
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.