javascript - Div 行为不稳定。关于崩溃和崩溃

Question

如果您在单击 Bar1 时注意到我的，则该条会下降并稍微上升一点。当 div 扩展时，它就像闪烁。请检查代码。

我使用了一个最初折叠的开关。但是一旦你点击 Bar1，div 就会关闭。当您再次单击它时，它会下降并表现得有点奇怪。像闪烁一样重新调整自己。我无法找出问题所在以及如何解决。请提供一些帮助。

<div class="container" id="container">
<div class="row" id="header"> <!-- Header -->
  <div class="col-xs-12" id="logo" data-toggle="collapse" data-target="#main">
    ABC<span class="glyphicon glyphicon-menu-down" id="icon" ></span>
  </div>
</div>

<div class="row" id="main"> <!-- Main -->
  <div class="col-xs-12">
    <div class="row mystyle"> <!-- Buttons -->
      <div class="col-xs-6" id="buttons">
        <button id="video-button" class="btn btn-sample btn-block">Detail1</button>
      </div>
      <div class="col-xs-6" id="buttons">
        <button id="channel-button" class="btn btn-sample btn-block">Detail2</button>
      </div>
    </div>
  </div>
  <!-- Detail Starts from here! -->
  <div class="row video-main-style" id="video-detail">
    <!-- Name -->
    <div class="row">
      <div class="col-xs-12" id="video-name">
        <h1>ABC</h1>
      </div>
    </div>
    <!--  goes here -->
    <div class="row main-style">
      <div class="row" data-toggle="collapse" data-target="#views-compared-data">
        <div class="col-xs-12" id="views-compared">Bar1<span class="glyphicon glyphicon-menu-down" id="icon-accord"></span></div>
      </div>

      <div class="row" id="views-compared-data">
        <div class="col-xs-12">
            Some random data<br />
            More randomn data<br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. 
          </div>
      </div>
    </div>
  </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

#container {
    width: 400px;
    border:1px solid black;
}
#header {
    background-color: #6C6D70;
    border-bottom: 5px solid #2DB5AB;
    height: 50px;
}
#logo {
    padding:10px;
    font-size: 18px;
    font-family: sans-serif;
    font-weight: bold;
    color: #FFFFFF;
}
#arrow-down {
    color:white;
    font-size: 18px;
    padding: 15px 10px 10px 10px;
    border:0px;
    font-weight: strong;
}
.mystyle{
    padding:20px;
}

#buttons {
    padding:0;
    margin: 0;

}
#video-name h1{

    font-size: 24px;
    font-family: sans-serif;
    font-weight: bold;
    color: #2DB5AB;
    padding-left: 20px;
    margin-top: 0;
}

.main-style{
    padding: 0px 40px 10px 40px;
}

.video-main-style{
    padding: 0px 20px 10px 20px;
}

#views-compared{
    border: 1px solid black;
    padding: 2px 10px;
    background: #E6E7E8;
    color:#6C6D70;
    font-weight: bold;
}

#views-compared-data{
    border: 1px solid black;
    padding: 5px;
    border-top: 0;
}

提前致谢

PS 这是一个jsFiddle上面的代码。

Answer 1

假设您也在使用 bootstrap，根据您的类名，您应该添加类 collase 或 collapse in(取决于您是希望它关闭还是打开默认情况下)到你有数据的数据行，就像这样

<div class="row collapse" id="views-compared-data">
...
</div>

您看到的行为是在第一次切换时添加 collapse 类。

参见 opened by default和 closed by default