部门行为不正常。关于折叠和折叠

如果您在点击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。

来源

2015-11-10 Akash Kumar

能否请你添加一个小提琴？和你使用的是什么版本的jquery – Rik

jquery版本2.0.3 –

假设你正在使用引导为好，根据你的类名，你应该添加collase或collapse in类（取决于你是否希望它关闭或默认开启），以使数据的数据行，像这样

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

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

看到opened by default和closed by default

来源

2015-11-10 08:45:13 Rik

部门行为不正常。关于折叠和折叠

回答

相关问题