切換時的空間問題

Question

我在嘗試使用多列手風琴，但擴展時遇到間隙問題。請參閱：

和JS小提琴鏈接HTML,https://jsfiddle.net/rub3k4h4/

Answer 1

你想要什麼，如果你使用display:inline-block 你應該把你的手風琴在兩個單獨的列中，您將調整，因爲你不能做你喜歡（我用浮動）：

<div> //outer container 
    <div id="col1"> //left list container 
     <ul id="wrap"> 
      <li class="race-class toggle-col">FP1 
       <div class="col11"></div> 
      </li> 
     </ul> 
    </div> 
    <div id="col2">/* your list right here */</div> //right list container 
</div> 

而且你的JS可以簡單的

$(document).ready(function(){ 
    $("li > div[class^=col]").hide(); 
    $(".toggle-col").click(function(){ 
     $(this).find("[class^=col]").toggle(); 
    }); 
}); 

入住這fiddle