Javascript 多列列表的JQuery滑动切换

我有一个宽度为33%的大列表，所以有3列

computers   monitors   hi-fi
sex-toys    pancakes   scissors

在它们中的每一个都有UL隐藏，点击滑动切换

JQuery

$('.subCategory > .parentleaf:has(ul) > .categoryicon').click(function() {
    $(this).siblings('ul').slideToggle('fast');
    });

问题不是我想要的，他们每次都会重新列出，就像这样

computers   monitors   hi-fi
[li]cars    sex-toys   pancakes
[li]dogs    scissors

我想这样滑动它们：

computers   monitors   hi-fi
[li]cars    pancakes   scissors
[li]dogs
sex-toys       

我怎样才能做到这一点

---

-在这种情况下，红色背景颜色需要用于3列

我在每三列之间添加了一个更清晰的div

<ul class="subCategory">
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Cars</span>
        <ul class="submenu">
            <li><a href="#">Car 1</a></li>
            <li><a href="#">Car 2</a></li> 
            <li><a href="#">Car 3</a></li>
            <li><a href="#">Car 4</a></li>
        </ul>
    </li>
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Phones</span>
        <ul class="submenu">
            <li><a href="#">Phone 1</a></li>
            <li><a href="#">Phone 2</a></li> 
            <li><a href="#">Phone 3</a></li>
            <li><a href="#">Phone 4</a></li>
        </ul>
    </li>  
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Guns</span>
        <ul class="submenu">
            <li><a href="#">Gun 1</a></li>
            <li><a href="#">Gun 2</a></li> 
            <li><a href="#">Gun 3</a></li>
            <li><a href="#">Gun 4</a></li>
        </ul>
    </li>   
    <div class="clearer"></div>
    <li class="parentleaf">
        <span class="categoryicon">click</span>
        <span class="categoryname">Notebooks</span>
        <ul class="submenu">
            <li><a href="#">Notebook 1</a></li>
            <li><a href="#">Notebook 2</a></li> 
            <li><a href="#">Notebook 3</a></li>
            <li><a href="#">Notebook 4</a></li>
        </ul>
    </li>   

---

您还可以获取当前单击的

li的索引，并通过一些数学运算，在单击时添加一个更清晰的div，必要时将其删除，但我认为没有必要这样做
请添加一个JSFIDLE代码我们可以提供更多帮助如果您在某处添加了
div
元素，是否有任何问题？我只是尝试编写语义正确的代码，所以任何帮助这个名单是GooDIT的语义权利不担心我会发布我的答案谢谢，其中一个解决方案，将考虑它，将接受它，如果我可以使背景的切换项目不同3柱。谢谢，这是一个解决方案，但不是我想要的。我不想从两边空白，只有李的名字不改变切换后的顺序。您的解决方案也很好，但在本例中，我希望切换ul不同颜色的背景，但适用于所有3列。您欢迎，如果我有更多时间，我将更新其他解决方案：）更新JSFIDLE 2-如果红色适用于3列，我将接受它，在本例中，我将仅切换1 ul，因此需要控制活动状态
.clearer
{
    clear:both; 
}