簡體   English   中英

根據元素是否折疊來更改引導折疊按鈕中的文本

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM