JQuery幻灯片切换多列列表

JQuery slideToggle for multicolumn list

本文关键字：列表 幻灯片 JQuery      更新时间：2023-09-26

我得到了一个宽度为li 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

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

jsFiddle

jsFiddle 2-在这种情况下，需要红色bg颜色用于3列

我在每三个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，并在需要时将其删除，但我认为没有必要使用此

相关文章：