根据元素是否已折叠，更改引导折叠按钮中的文本

Question

关于这一点，我已经看过几个线程，但是我在修改代码以适应我的设计时遇到了一些问题。

我在这里使用折叠按钮：http://getbootstrap.com/javascript/#collapse

它们工作得很好，但我希望文本和图标能够根据元素的状态进行更改。

最小化:显示更多V扩展:显示更少^

我用两个脚本编写了它，因为我是JavaScript的gumby：

<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>

元素的名称都是collapseBech、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>

Answer 1

使用三元运算符的方式是不正确的，您正在这样做：

[condition]?true : [code_if_true] , [code_if_false];

但正确的语法是：

[condition]?  [code_if_true] : [code_if_false];

注意，您没有使用关键字"true“，冒号(:)分隔了两个代码块，而不是代码中的逗号。

但是，您的代码相当长，所以三元运算符不是一个好主意，您应该使用一个简单的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');
  }
});

您将看到，当您单击该按钮时，文本将从“读取更多”更改为“读取更少”，反之亦然。

Answer 2

您可以使用内置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