Question

我有一个带有Bootstrap 4的按钮类collapse。

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body" aria-expanded="true">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

我的隐藏div按钮。点击后，它会打开。我想要做的是将div初始化为打开，然后，当我按下按钮时，隐藏。（逆过程。）

Answer 1

Bootstrap模态或bootstrap下拉列表很好用

Answer 2

您可以像这样添加课程IfNotPresent

show

Answer 3

将class A { constructor() { this.method = this.method.bind(console); } method() { return this; } } const instance = new A(); console.log( instance.method() === console // true );类添加到in类div作为默认值collapse

opened

<div class="collapse in" id="collapseExample">是显示div。无论何时想要打开div，只需添加in类

即可

Answer 4

将in show课程添加到collapse div。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" ></script>

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse in show" id="collapseExample">
  <div class="card card-body" aria-expanded="true">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Bootstrap崩溃活跃

4 个答案: