javascript - Bootstrap: How to collapse a wrapper div without jumping? - Stack Overflow

admin管理员组

文章数量:1279118

I'd like to collapse and show two columns when a link is clicked.

I've wrapped the two columns in a div, which has an id referenced by the link in the column above it. The first column takes the full width of the page, and the second and third should split the page or stack. All three columns are wrapped in a div.row, and the rows repeat down the page.

It seems that the collapse animation works for rows that have a border. However, the opening transition "jumps" back up. If I remove the border on the row and click on the link, there is a delay before the two columns just abruptly appear.

I want neither of these things to happen. I'd like a smooth transition revealing the two columns when the link is clicked. How can I make that happen?

<div class='container'>
  <div class='row' style='border-bottom: 1px solid #ddd;'>
    <div class='col-xs-12'>
      <a data-toggle='collapse' href='#details1'>Open or close details</a>
    </div>
    <div class='collapse' id='details1'>
      <div class='col-sm-6'>
        <table class='table table-bordered table-condensed'>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
        </table>
      </div>
      <div class='col-sm-6'>
        <b>Hello world</b>
      </div>
    </div>
  </div>

  <div class='row'>
    <div class='col-xs-12'>
      <a data-toggle='collapse' href='#details2'>Open or close details (row with no border)</a>
    </div>
    <div class='collapse' id='details2'>
      <div class='col-sm-6'>
        <table class='table table-bordered table-condensed'>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
        </table>
      </div>
      <div class='col-sm-6'>
        <b>Hello world</b>
      </div>
    </div>
  </div>
</div>

JSFiddle.

I'd like to collapse and show two columns when a link is clicked.

I've wrapped the two columns in a div, which has an id referenced by the link in the column above it. The first column takes the full width of the page, and the second and third should split the page or stack. All three columns are wrapped in a div.row, and the rows repeat down the page.

It seems that the collapse animation works for rows that have a border. However, the opening transition "jumps" back up. If I remove the border on the row and click on the link, there is a delay before the two columns just abruptly appear.

I want neither of these things to happen. I'd like a smooth transition revealing the two columns when the link is clicked. How can I make that happen?

<div class='container'>
  <div class='row' style='border-bottom: 1px solid #ddd;'>
    <div class='col-xs-12'>
      <a data-toggle='collapse' href='#details1'>Open or close details</a>
    </div>
    <div class='collapse' id='details1'>
      <div class='col-sm-6'>
        <table class='table table-bordered table-condensed'>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
        </table>
      </div>
      <div class='col-sm-6'>
        <b>Hello world</b>
      </div>
    </div>
  </div>

  <div class='row'>
    <div class='col-xs-12'>
      <a data-toggle='collapse' href='#details2'>Open or close details (row with no border)</a>
    </div>
    <div class='collapse' id='details2'>
      <div class='col-sm-6'>
        <table class='table table-bordered table-condensed'>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
        </table>
      </div>
      <div class='col-sm-6'>
        <b>Hello world</b>
      </div>
    </div>
  </div>
</div>

JSFiddle.

• javascript
• jquery
• html
• css
• twitter-bootstrap-3

Share Improve this question Follow edited Jul 21, 2015 at 1:43 Jeffrey Tang asked Jul 21, 2015 at 0:19 Jeffrey TangJeffrey Tang 79366 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

Got it! The wrapper div needs to be set so that its height equals the maximum height of its children (so Bootstrap knows how much to expand). From Make outer div be automatically the same height as its floating content, this somehow works (!?)

.details {
    overflow: hidden;
    clear: both;
}

where div.details is the wrapper div containing the two columns. See the JSFiddle.

In the JSFiddle you provided the two behave exactly the same way, they open and then the content appers.

The only difference is that you don't see it opening in the second one because it's white on white, try adding a border or a background to it.

本文标签： javascriptBootstrap How to collapse a wrapper div without jumpingStack Overflow