javascript - 根据元素是否折叠更改 Bootstrap 折叠按钮中的文本

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>

元素的名称都是类似 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');
  }
});

您会看到，当您单击该按钮时，文本会从“Read More”变为“Read Less”，反之亦然。