如果未单击，则向上滑动幻灯片元素

Question

我刚刚对第一个问题有所帮助： 单击偶数元素时将类添加到偶数元素，单击奇数元素时将类添加到奇数元素

这是我的下一个问题：看小提琴http://jsfiddle.net/VHd6k/

<ul id="list">
    <li>
        <p class="title">One</p>
        <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate felis in turpis sodales ullamcorper. Morbi condimentum odio nec auctor iaculis</p>
    </li>
    <li>
        <p class="title">Two</p>
        <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate felis in turpis sodales ullamcorper. Morbi condimentum odio nec auctor iaculis</p>
    </li>
    <li>
        <p class="title">Three</p>
        <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate felis in turpis sodales ullamcorper. Morbi condimentum odio nec auctor iaculis</p>
    </li>
    <li>
        <p class="title">Four</p>
        <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate felis in turpis sodales ullamcorper. Morbi condimentum odio nec auctor iaculis</p>
    </li>
</ul>

jQUery：

$("#list > li .title").on("click", function () {
    $('.active').removeClass('active');
    $(this).next().slideToggle();
    if ($(this).parent().index() % 2 == 0) {
        $('#list > li:even').addClass('active');
    } else {
        $('#list > li:odd').addClass('active');
    }
});

我的问题：活动类可以根据需要添加。 当其他li未被点击时，如何使它们滑上去？ 换句话说，仅一个扩展名。

Answer 1

最简单的答案似乎是使用$('.summary').not($(this).next()).slideUp();滑动所有其他$('.summary').not($(this).next()).slideUp(); ：

$("#list > li .title").on("click", function () {
    $('.summary').not($(this).next()).slideUp();
    $('.active').removeClass('active');
    $(this).next().slideToggle();
    if ($(this).parent().index() % 2 == 0) {
        $('#list > li:even').addClass('active');
    } else {
        $('#list > li:odd').addClass('active');
    }
});

jsFiddle示例

Answer 2

在slideToggle之后添加以下行：

$('#list > li .title').not(this).next().slideUp();

Answer 3

您可以使用聚焦。

$("#list > li .title").on("focusout", function (){
    $(this).slideToggle();
});