javascript - 如何在 Bootstrap 中折叠内容并更改按钮中的字形图标？

Question

由于缺乏我的 javascript 技能，我需要一些帮助来解决我最基本的 Bootstrap 问题。
这就是目标:通过折叠隐藏四个段落，每个段落都有一个“切换”按钮以使其可见或隐藏。
这就是问题所在:第一次折叠工作正常，但按钮内的第二个、第三个和第四个字形也在变化。如果我想在单击相应按钮后查看第二、第三和第四个折叠段落，它只会显示第一段。发生什么事？是否只有一种方法可以做到这一点，即在 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，添加了一个数字以使其唯一。