Question

我刚收到第一个问题的帮助：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上滑？换言之，只有一个应该扩展。

Answer 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

Answer 2

在slideToggle：

之后添加此行

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

Answer 3

您可以使用焦点。

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

如果未单击，则向上切换滑块元素

3 个答案: