提示並解決爲什麼這個Bootstrap切換隱藏/顯示不平滑

Question

剛剛完成我的引導切換隱藏/顯示，除了查看不同內容的功能外，它們都很好，所有這些功能都非常前衛而且不流暢。當激活切換等時，邊框跳轉。

我敢打賭，它一定是奇怪的腳本...不知道怎麼辦，我希望有人可以幫助。

$('.testver a i').on('click', function(e) { 
 
    var currTarget = $(this).closest('a').data('target').substr(1); 
 
    $('#leftpanel').find('[id^="demo"]').not(currTarget).collapse('hide'); 
 
});

#leftpanel {position: relative; } 
 
#leftpanel h1 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; border-top: 1px solid #eee; font-style: normal;} 
 
#leftpanel h2 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; font-style: normal;} 
 
#leftpanel a {margin-left: 230px; position: relative; top: -40px; right: -100px;} 
 
#demo1, #demo2, #demo3, #demo4 { color: #333; font-size: 14px; margin-top: -40px; margin-right: 5px; font-family: 'Myriad Pro 31655';} 
 

 

 

 
.collapse {} 
 
.testver { width: 370px;} 
 

 
.testver hr { 
 

 

 
} 
 

 
.fa-angle-up { 
 
    display: none; 
 
} 
 

 
.testver i { 
 

 
} 
 

 
.testver .fa { 
 
    right: 
 
} 
 

 
.arrow[aria-expanded="true"] .fa-angle-up { 
 
    display: inline-block; 
 
} 
 

 
    .arrow[aria-expanded="true"] .fa-angle-down { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div id="leftpanel"> 
 
       <div class="testver"> 
 
        <h1>Never seen before</h1> 
 

 

 
        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo1"> 
 
         <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
         <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
        </a> 
 
        <div id="demo1" class="collapse in" aria-expanded="true"> 
 
         text 
 
        </div> 
 
        <hr> 
 
       </div> 
 
       <div class="testver"> 
 
        <h2>Art and technology</h2> 
 

 

 
        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo2"> 
 
         <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
         <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
        </a> 
 
        <div id="demo2" class="collapse"> 
 
         text 
 
        <hr> 
 
       </div> 
 
       <div class="testver"> 
 
        <h2>Authenticity</h2> 
 

 

 
        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo3"> 
 
         <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
         <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
        </a> 
 
        <div id="demo3" class="collapse"> 
 
         text 
 
        </div> 
 
        <hr> 
 
       </div> 
 
       <div class="testver"> 
 
        <h2>Level of detail</h2> 
 

 

 
        <a href="javascript:void(0);" class="arrow" data-toggle="collapse" data-target="#demo4"> 
 
         <i class="fa fa-angle-down"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40"></i> 
 
         <i class="fa fa-angle-up"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40"></i> 
 
        </a> 
 
        <div id="demo4" class="collapse"> 
 
         text 
 
        </div> 
 
        <hr> 
 
       </div> 
 
      </div> 
 
      </div>

Answer 1

這是因爲margin-top:-40px

你應該爲margin-bottom: -20px另一招例如刪除差距<h1> 並從<a>top: -40px