javascript - 如何通过 jquery 或 bootstrap 在 Sidebar 过滤器中扩展 3 Div 和 rest Collapse

Question

我需要默认折叠打开的 # div 并通过 jquery 折叠其余部分....

<div class="toggle btn btn-default"  data-toggle="collapse"></div>
<div class="toggle btn btn-default"  data-toggle="collapse"></div>
<div class="toggle btn btn-default"  data-toggle="collapse"></div>
<div class="toggle btn btn-default"  data-toggle="collapse"></div>
<div class="toggle btn btn-default"  data-toggle="collapse"></div>
<div class="toggle btn btn-default"  data-toggle="collapse"></div>
<div class="toggle btn btn-default"  data-toggle="collapse"></div>
<div class="toggle btn btn-default"  data-toggle="collapse"></div>

这里我使用了 Bootstrap 的折叠类......但默认情况下它展开......我想要3个div默认展开并休息折叠......如何通过 Bootstrap 或jquery实现

Answer 1

使用 collapse in上课 div您希望默认展开并仅使用 collapse当你想要 div 时上课被折叠。

    <div class="btn-group">
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="true" aria-controls="collapseExample">
        Button with data-target1
      </button>

      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="true" aria-controls="collapseExample">
        Button with data-target2
      </button>

      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="true" aria-controls="collapseExample">
        Button with data-target3
      </button>

      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample4" aria-expanded="false" aria-controls="collapseExample">
        Button with data-target4
      </button>

      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample5" aria-expanded="false" aria-controls="collapseExample">
        Button with data-target5
      </button>

      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample6" aria-expanded="false" aria-controls="collapseExample">
        Button with data-target6
      </button>

      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample7" aria-expanded="false" aria-controls="collapseExample">
        Button with data-target7
      </button>

      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample8" aria-expanded="false" aria-controls="collapseExample">
        Button with data-target8
      </button>
    </div>
    <div class="collapse in" id="collapseExample1">
      <div class="well">
        <h1>Slide 1</h1>
        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 class="collapse in" id="collapseExample2">
      <div class="well">
        <h1>Slide 2</h1>
        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 class="collapse in" id="collapseExample3">
      <div class="well">
        <h1>Slide 3</h1>
        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 class="collapse" id="collapseExample4">
      <div class="well">
        <h1>Slide 4</h1>
        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 class="collapse" id="collapseExample5">
      <div class="well">
        <h1>Slide 5</h1>
        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 class="collapse" id="collapseExample6">
      <div class="well">
        <h1>Slide 6</h1>
        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 class="collapse" id="collapseExample7">
      <div class="well">
        <h1>Slide 7</h1>
        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 class="collapse" id="collapseExample8">
      <div class="well">
        <h1>Slide 8</h1>
        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>