Question

我想在父容器中显示和隐藏多个块=如何在Bootstrap中执行此操作？

<div id="parent1">
<div>Child 1</div>
<div class="child-info collapse">Info 1</div>
<div>Child 2</div>
<div class="child-info collapse">Info 2</div>
<div>Child 3</div>
<div class="child-info collapse">Info 3</div>
</div>

如何在父容器中一次显示/隐藏所有内容 - 如果可能没有其他JavaScript代码。我阅读了文档，但仍然不清楚如何做到这一点 - http://getbootstrap.com/javascript/#collapse？

Answer 1

这是你想要做的吗？

＆＃13;

$(function() {

  var active = true;

  $('#collapse-all').click(function() {
    if (active) {
      active = false;
      $('.panel-collapse').fadeToggle('show');
      $('.panel-title').attr('data-toggle', '');
    } else {
      active = true;
      $('.panel-collapse').fadeToggle('hide');
      $('.panel-title').attr('data-toggle');
    }
  });
});

＆＃13;

.panel.panel-parent {
  text-align: center;
  width: 100%;
  background: #f00;
  cursor: pointer;
}
.panel.panel-parent h4.panel-title {
  font-size: 50px;
  font-weight: bold;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<hr>
<div class="container">
  <div class="panel-group" id="collapse-all">
    <!-- First Panel -->
    <div class="panel panel-parent">
      <div class="panel-heading">
        <h4 class="panel-title" data-toggle="collapse" data-target="#collapse-parent">
                 Parent
             </h4>

      </div>
    </div>
  </div>
  <div id="collapse-parent" class="panel-collapse collapse">
    <div class="panel-body">
      <div class="container">
        <div class="panel-group" id="accordion">
          <!-- First Panel -->
          <div class="panel panel-danger">
            <div class="panel-heading">
              <h4 class="panel-title" data-toggle="collapse" data-target="#collapseOne">
                 Child #1
             </h4>

            </div>
            <div id="collapseOne" class="panel-collapse collapse">
              <div class="panel-body">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta)
                desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente
                igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones
                de Lorem Ipsum..</div>
            </div>
          </div>
          <!-- Second Panel -->
          <div class="panel panel-danger">
            <div class="panel-heading">
              <h4 class="panel-title" data-toggle="collapse" data-target="#collapseTwo">
                 Child #2
             </h4>

            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
              <div class="panel-body">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta)
                desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente
                igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones
                de Lorem Ipsum..</div>
            </div>
          </div>
          <!-- Third Panel -->
          <div class="panel panel-danger">
            <div class="panel-heading">
              <h4 class="panel-title" data-toggle="collapse" data-target="#collapseThree">
                 Child #3
             </h4>

            </div>
            <div id="collapseThree" class="panel-collapse collapse">
              <div class="panel-body">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta)
                desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente
                igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones
                de Lorem Ipsum..</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr>
  <div class="alert alert-warning">Where are the kids??</div>
</div>

＆＃13;

如何在Bootstrap中同时折叠所有子块？

1 个答案: