切换时出现空格问题

Question

我正在尝试使用多列手风琴，但我在扩展时遇到了差距问题。请参阅：

和JS Fiddle链接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