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

Question

我在这里看到了一些关于此的线程，但是在扩展代码以适合我的设计时遇到了问题。

我正在从此处使用“折叠”按钮： 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>

Answer 1

您使用三元运算符的方式不正确，您正在执行以下操作：

[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');
  }
});

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

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