Javascript 如何折叠内容并更改引导右侧按钮中的glyphicon？

由于缺乏javascript技能，我需要一些帮助来解决基本的引导问题。
这就是目标：通过折叠和“切换”按钮将四个隐藏段落显示或隐藏起来。
这就是问题所在：第一次折叠工作正常，但按钮内的第二、第三和第四个图标也在变化。如果我想在点击相应的按钮后查看第二、第三和第四个折叠段落，它只显示第一个段落。发生了什么事？只有一种方法可以做到这一点，即在Javascript中为每个段落包含不同的ID吗？
现场直播：

---

请看一下我对您的代码所做的更改

您的问题实际上与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>

编辑

还有一点额外的解释：如果您计划跨多个DOM元素共享js逻辑，那么使用类是一种很好的方法。这就是为什么我将js和DOM更改为使用

.customCollapse

而不是

collapseDiv

id

---

还请注意，我通过添加一个数字来更改每个collapseDiv上的ID，使其唯一。

非常感谢！在考虑了您的解决方案之后，很明显，新的类和ID是更好的选择。我必须在脚本

$（this.parent（）.find…

：-）中进一步了解添加javascript的原因，很高兴它能帮助我：）。请注意，

$（this）.parent（）…

不是本机javascript，您在那里使用的是jQuery。另外，你能把答案标记为接受吗？

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

<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>

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