我有一个宽度为 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');
});
没有按我的意愿滑动的问题,他们每次都rebuld list,像这样
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 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 并在需要时将其删除,但我认为没有必要这样做
关于javascript - 用于多列列表的 JQuery slideToggle,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14953846/