用于多列列表的 JQuery slideToggle答案

【问题标题】：JQuery slideToggle for multicolumn list用于多列列表的 JQuery slideToggle
【发布时间】：2013-02-19 09:18:29
【问题描述】：

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

computers   monitors   hi-fi
sex-toys    pancakes   scissors

每一个都有隐藏的UL，点击slideToggle。

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

我怎样才能做到这一点？？

jsFiddle

jsFiddle 2 - 在这种情况下需要红色背景颜色为 3 列

【问题讨论】：

请添加一个 jsfiddle 代码，我们可以提供更多帮助
如果你在某处添加div元素有什么问题吗？
我只尝试编写语义正确的代码，所以对这个列表的任何帮助都是好的
这是语义正确的别担心我会发布我的答案
谢谢，其中一种解决方案，会考虑，如果我可以让切换项目的背景在 3 列中不同，我会接受。

标签： javascript jquery html css list

【解决方案1】：

我在每三个li 之间添加了一个clearer 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>

CSS

.clearer
{
    clear:both; 
}

您还可以获取当前点击的li 的索引，并通过一些数学运算在点击时添加更清晰的 div 并在需要时将其删除，但我认为没有必要这样做

【讨论】：

谢谢，这是解决方案之一，但不是我想要的。我不希望两边有空格，只有 LI 名称在切换后不会改变顺序。您的解决方案也很好，但在这种情况下，我想做切换 ul 不同颜色的背景，但对于所有 3 列。
欢迎您，如果我有更多时间，我会更新其他解决方案:)
更新了 jsFiddle 2 - 如果红色是 3 列，我会接受它，在这种情况下，我只会切换 1 ul，所以需要控制活动状态