如何在引导程序中折叠内容并更改按钮中的字形图标？

Question

由于缺乏 javascript 技能，我需要一些帮助来解决我非常基本的引导问题。
这就是目标：通过折叠隐藏四个段落，每个段落都有一个“切换”按钮以使其可见或隐藏。
这就是问题所在：第一次折叠工作正常，但按钮内的第二、第三和第四个字形图标也在发生变化。如果我想在点击相应的按钮后查看第二、第三和第四个折叠的段落，它只会显示第一段。发生什么事？是否只有一种方法可以实现这一点，即在 Javascript 中为每个段落包含不同的 ID？
在 Bootply 上直播：http://www.bootply.com/Jyf06v1aiK

<div class="col-xs-6">
    <div class="collapse" id="collapseDiv">
        <p class="">This is the FIRST collapsible content!</p>
    </div>
    <button data-toggle="collapse" data-target="#collapseDiv">
      <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
    </button>
</div>
<div class="col-xs-6">
    <div class="collapse" id="collapseDiv">
        <p class="">This is the SECOND collapsible content!</p>
    </div>
    <button data-toggle="collapse" data-target="#collapseDiv">
      <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
    </button>
</div>
<div class="col-xs-6">
    <div class="collapse" id="collapseDiv">
        <p class="">This is the THIRD collapsible content!</p>
    </div>
    <button data-toggle="collapse" data-target="#collapseDiv">
      <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
    </button>
</div>
<div class="col-xs-6 bg-success">
    <div class="collapse" id="collapseDiv">
        <p class="">This is the FOURTH collapsible content!</p>
    </div>
    <button data-toggle="collapse" data-target="#collapseDiv">
      <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
    </button>
</div>

Javascript：

$('#collapseDiv').on('shown.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
});

$('#collapseDiv').on('hidden.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
});

Answer 1

看看我对你的代码here所做的更改。

您的问题实际上与 JS 无关，而是与 DOM 相关的概念。 首先，在多个元素中使用相同的 id 并不是一个好主意，id 属性应该在整个 DOM 中是唯一的。

其次，$('.glyphicon') 指的是 DOM 中的所有元素，其类 glyphicon 不仅是最接近您的折叠 div。

我在此处包含代码，但请随时在上面的链接中尝试。

<div class="container">
     <h1 class="">Bootstrap Collapse Buttons (WIP)</h1>

    <div class="col-xs-6 bg-warning">
        <div class="collapse customCollapse" id="collapseDiv">
            <p class="">This is the FIRST collapsible content!</p>
        </div>
        <button data-toggle="collapse" data-target="#collapseDiv" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>

        </button>
    </div>
    <div class="col-xs-6 bg-info">
        <div class="collapse customCollapse" id="collapseDiv2">
            <p class="">This is the SECOND collapsible content!</p>
        </div>
        <button data-toggle="collapse" data-target="#collapseDiv2" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>

        </button>
    </div>
    <div class="col-xs-6 bg-danger">
        <div class="collapse customCollapse" id="collapseDiv3">
            <p class="">This is the FIRST collapsible content!</p>
        </div>
        <button data-toggle="collapse" data-target="#collapseDiv3" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>

        </button>
    </div>
    <div class="col-xs-6 bg-success">
        <div class="collapse customCollapse" id="collapseDiv4">
            <p class="">This is the SECOND collapsible content!</p>
        </div>
        <button data-toggle="collapse" data-target="#collapseDiv4" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>

        </button>
    </div>
</div>

还有js

$('.customCollapse').on('shown.bs.collapse', function () {
   $(this).parent().find(".glyphicon").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
});

$('.customCollapse').on('hidden.bs.collapse', function () {
   $(this).parent().find(".glyphicon").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
});

编辑

一点额外的解释：如果你打算在多个 DOM 元素之间共享 js 逻辑，那么一个好方法就是使用类。这就是为什么我将您的 js 和 DOM 更改为使用 .customCollapse 而不是 collapseDiv id。

还请注意，我更改了每个 collapseDiv 上的 ID，方法是添加一个数字以使其唯一。