如何slideUp和slideDown一组<li>的</li>

Question

我正在使用bootstrap的list-group类来显示几个类别下的产品列表（下图）。用户可以单击某个类别打开它并关闭任何其他打开的（自制手风琴）。

HTML：

<ul id="category_Reports" class="list-group category">
    <li class="list-group-item list-group-heading">
        <a onclick="focusCategory('#category_Reports');">Reports</a>
    </li>

    <li class="list-group-item product">
        <i class="icon icon-40-mo1 pull-left"></i>
        <a class="btn btn-success pull-right" onclick="addProduct(MO1);">Add</a>
        Market Outlook 1
        <div class="clearfix"></div>
    </li>

    <li class="list-group-item product">...</li>
    <li class="list-group-item product">...</li>
    <li class="list-group-item product">...</li>
    <li class="list-group-item product">...</li>
</ul>

<ul id="category_Newsletters" class="list-group category">
    <li class="list-group-item list-group-heading">...</li>
    <li class="list-group-item product">...</li>
    <li class="list-group-item product">...</li>
    <li class="list-group-item product">...</li>
</ul>

<ul id="category_Services" class="list-group category">
    <!--Services...-->
</ul>

JS：

function focusCategory(id) {
    $('.category').not(id).children('.product').slideUp();
    $(id).children('.product').slideDown();
}

但是，我只是在向上和向下滑动时将每个<li />定位为一个单元：

有没有办法将除第一个<li />之外的所有目标定位为一个组，以便它具有更连贯的slideUp（和slideDown）动画？

如果可以在不必乱用现有的bootstrap css的情况下完成这将是很好的。

Answer 1

您想要的是将要折叠的所有li元素包装到一个容器中，唯一有效的容器是ol和ul。因此，您当前的HTML结构无法满足您的需求。

你必须做一点点黑客攻击，但你可以通过添加自己的CSS而不改变Bootstrap来实现。

首先，将您的列表分成两个，然后添加自己的类 - 我称之为list-group-top和list-group-bottom：

<ul id="category_Newsletters" class="list-group category list-group-top">
    <li class="list-group-item list-group-heading"><a onclick="focusCategory('#category_Newsletters');">Heading</a>
    </li>
</ul>
<ul class="list-group category list-group-bottom"> <!-- note the repeated classes -->
    <li class="list-group-item product">item 1</li>
    <li class="list-group-item product">item 2</li>
    <li class="list-group-item product">item 3</li>
</ul>

现在，添加一些重写样式 - 确保在 Bootstrap的CSS文件后加载

.list-group-top {
    margin-bottom: 0;
}
.list-group-bottom+.list-group-top {
    margin-top: 20px;
}
.list-group-top .list-group-item:last-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.list-group-bottom .list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-width: 0;
}

最后对JavaScript进行简短调整以适应新的DOM树：

function focusCategory(id) {
    $('.category').not(id).next('.list-group-bottom').slideUp();
    $(id).next('.list-group-bottom').slideDown();
}

http://jsfiddle.net/mblase75/32q6a/

或者，您可以在slideUp容器中添加和删除类，并添加CSS动画，而不是使用slideDown和.list-group-top。这会让你有更多的力量来为他们的'＃34;折叠＆＃34;中的列表添加样式。状态。