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

问题描述 投票：0回答：3

我已经查看了这里的一些关于此问题的线程，但我在修改代码以适应我的设计时遇到了问题。

我正在使用此处的折叠按钮：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>
javascript jquery html css twitter-bootstrap
3个回答
2
投票

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

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

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

0
投票

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

0
投票

您所需要的只是添加一些CSS：

[data-bs-toggle="collapse"]:not(.collapsed) .uncollapsed-hide {
  display: none;
}

[data-bs-toggle="collapse"].collapsed .collapsed-hide {
  display: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

<p class="d-inline-flex gap-1">
  <a class="btn btn-primary collapsed" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Click to <span class="uncollapsed-hide">show</span><span class="collapsed-hide">hide</span>
    </a>
  <button class="btn btn-primary collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Click to <span class="uncollapsed-hide">show</span><span class="collapsed-hide">hide</span>
    </button>
</p>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.