如果未单击，则向上切换滑动元素答案

【问题标题】：Toggle slide element up if not clicked如果未单击，则向上切换滑动元素
【发布时间】：2014-05-10 21:29:33
【问题描述】：

我的第一个问题刚刚得到帮助：Add class to even elements when even element is clicked and add class to odd elements when odd element is clicked

这是我的下一个问题：看小提琴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 向上滑动？换句话说，应该只扩展一个。

【问题讨论】：

标签： jquery html

【解决方案1】：

最简单的答案似乎是使用$('.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 example

【讨论】：

【解决方案2】：

您可以使用焦点输出。

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

【讨论】：

【解决方案3】：

在 slideToggle 之后添加这一行：

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

【讨论】：