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

关于这一点，我已经看了一些文章，但是我在修改代码以适应我的设计时遇到了一些问题

我在这里使用折叠按钮：

它们工作正常，但我希望文本和图标根据元素的状态进行更改

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

我用两个脚本编写了它，因为我非常喜欢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>

$（“.collapse”）。单击（函数（）{
$（this）.hasClass（“in”）？true:（函数（）{
$（this.children（“i”）.removeClass（“fa-caret-down”）；
$（this.children（“i”）.addClass（“fa-caret-up”）；
}，函数（）{
$（this.children（“i”）.removeClass（“fa-caret-up”）；
$（this.children（“i”）.addClass（“fa-caret-down”）；
});
});
$（“.collapse”）。单击（函数（）{
$（this）.hasClass（“in”）？true:（函数（）{
$（this.children（“i”）.removeClass（“更多”）；
$（this.children（“i”）.addClass（“Less”）；
}，函数（）{
$（this.children（“i”）.removeClass（“Less”）；
$（this.children（“i”）.addClass（“More”）；
});
});

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

猫坐在垫子上

猫坐在垫子上

猫坐在垫子上

猫坐在垫子上

猫坐在垫子上

猫坐在垫子上

---

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

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

但正确的语法是：

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

请注意，您没有使用关键字“true”，冒号（

：

）分隔两个代码块，而不是代码中的逗号

但是，您的代码相当长，因此三元运算符不是一个好主意，您应该使用简单的if-else，例如：

编辑：

在上次编辑中看到您的HTML代码后，我更改了下面的代码。问题是，当有人使用class

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>

---

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

您可以使用内置引导的折叠事件

$('#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

您好，谢谢您的回复，但这把小提琴似乎什么都没用？我可能做错了什么……这是我的预期用途吗：$（'#collapseBech'）.on（'hidden.bs.collapse'，function（）{$（this.children（“I”）.removeClass（'Less'）；$（this.children（“I”）.addClass（'More'）；$（this.children（“I”）.removeClass（'fa-caret-up'）；$（this.children（“I”）.addClass（'fa-caret-down'）；）$（“#collapseBech”）.on（'show.bs.collapse'，function（）{$（this.children（“i”）.removeClass（'More'）；$（this.children（“i”）.addClass（'Less'）；$（this.children”）.removeClass（'fa-caret-down'）；$（this.children（“i”）.addClass（'fa-caret-up'）；）；“this”：这是我需要特别命名的元素吗？不，你应该保持原样。当您有一个事件，例如

click（）

，

$（此）

标识应用事件的元素：如果是click事件，则是您单击的元素，在你的例子中，这是类

.collapse

的元素之一。也许如果你将你的html添加到你的问题中，我可以帮助你更具体一些。对不起，伙计，html补充道。很棒的伙计，谢谢你。唯一的问题是，它似乎只是剥去了fa插入符号/fa插入符号。我点击按钮，文本改变，但fa插入符号向下图标消失。再次单击不会使fa插入符号出现。如果它很难修复的话，我也许可以把它去掉。

$('#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"});
});