部門行爲不正常。關於摺疊和摺疊

如果您在點擊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

部門行爲不正常。關於摺疊和摺疊

回答

相關問題