bootstrap div崩溃并扩展

Question

当我单击不同的按钮时，我想分别展开和折叠具有相同id的div元素。

这是我的HTML代码

<body>
    <button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem">
        <span class="glyphicon glyphicon-collapse-down"></span> Show Status
    </button>
    <div class="collapse" id="dem">
        <p>This is first</p>
    </div>
    <button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem">
        <span class="glyphicon glyphicon-collapse-down"></span> Show Status
    </button>
    <div class="collapse" id="dem">
        <p>This is Second</p>
    </div>
    <button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem">
        <span class="glyphicon glyphicon-collapse-down"></span> Show Status
    </button>
    <div class="collapse" id="dem">
        <p>This is Third</p>
    </div>

</body>

这是我的剧本

$(function(){

    $('#dem').on('show.bs.collapse', function () {
        $('#button').html('<span class="glyphicon glyphicon-collapse-up"></span> Hide Status');
    })
    $('#dem').on('hide.bs.collapse', function () {
        $('#button').html('<span class="glyphicon glyphicon-collapse-down"></span> Show Status');
    })
})

当我单击第一个按钮时，它会展开，而当我单击第二个或第三个按钮时，第一个按钮的内容会折叠。其他按钮的内容不会扩展。我知道我缺少一些脚本代码，但我不知道代码是什么。

Answer 1

ID应该始终为DISTINCT。

将它们更改为类...由于使用的是jQuery，因此可以在click事件中执行类似的操作...

$(".className").hide()
$(".className").show()
$(".className").toggle()

假设它们具有不同的ID，则更改将仅仅是...

$("#button1").on('click', function() {
  if ($(this).is(":visible")) {
    $(".className").hide()
  } else {
    $(".className").show()
  }
});

bootstrap div崩溃并扩展

问题描述

1 个解决方案

解决方案1
5 已采纳 2014-12-04 16:38:23

bootstrap div崩溃并扩展

问题描述

1 个解决方案

解决方案1 5 已采纳 2014-12-04 16:38:23

解决方案1
5 已采纳 2014-12-04 16:38:23