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

假设您正在使用引导程序，根据您的类名，您应该将类collase或collapse in（取决于您是希望它是关闭还是默认打开）添加到您的数据行拥有数据，如此

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

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

请参阅opened by default和closed by default

分歧表现不稳定。论坍塌与崩溃

1 个答案: