如何通過jQuery或Bootstrap擴展3 Div並休息在側邊欄過濾器中

Question

我需要默認折疊open＃div並通過jquery折疊rest ....

<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的折疊類.....但是默認情況下它是expand ....默認情況下我要3 div展開並休息折疊.... bootstrap或jquery如何實現

Answer 1

collapse in默認情況下，要在div上將類中的collapse in使用到div ，並且在要折疊div時僅使用collapse類。

    <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>