Question

由于缺乏我的javascript技能，我需要一些帮助来解决我的基本引导问题这就是目标：四个隐藏的段落通过崩溃和一个＆＃34;切换＆＃34;每个按钮使其可见或隐藏。
这就是问题：第一次崩溃工作正常，但按钮内的第二，第三和第四个字形也在改变。如果我想在单击相应按钮后查看第二，第三和第四个折叠段落，它只显示第一段。发生什么事？是否只有一种方法可以使其工作，在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中应该是唯一的。

其次，pipe指的是DOM中所有元素$('.glyphicon')不仅最接近崩溃div。

我在这里包含了代码，但请随意在上面的链接中尝试。

glyphicon

和js

<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').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"); });而不是.customCollapse id的原因。

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

如何在引导程序中折叠内容并更改按钮中的glyphicon？

1 个答案: