Question

sample

    var main = function() {
    $('.article').click(function() {
        if($(this).hasClass('current')) {
                $(this).children('.description').toggle("slow");
        }
        else {
                $('.article').removeClass('current');
                $('.description').hide();
                $(this).addClass('current');
                $(this).children('.description').toggle("slow");
        };
 });
}
$(document).ready(main);

您好，我想知道如何通过我的点击切换列表来学习如何做一些事情：

我很难在用户点击已打开的文章后如何使此切换列表保持持久性。现在我设置当前文章的方式将在每次点击时切换，我希望它保持打开状态，只有在点击标题本身时才会关闭（与项目中的任何位置相对）。

还有 +如何创建一个打开/关闭所有切换链接
+连续性视觉提示，显示列表是可扩展的，如果它是打开的或关闭的，将适合这种风格

Answer 1

如果您不希望单击子项目导致主标题关闭，则需要停止事件传播。

请检查完整语法/用法：How to stop event bubbling on checkbox click

用法：

event.stopPropagation()

Answer 2

您需要定位.article .item而不是.article

var main = function() {
    $('.article .item').click(function() {
        var article = $(this).closest('.article');
        if(article.hasClass('current')) {
                article.children('.description').toggle("slow");
        }
        else {
                $('.article').removeClass('current');
                $('.description').hide();
                article.addClass('current');
                article.children('.description').toggle("slow");
        };
   });
}

http://jsfiddle.net/kL70z8ky/5/

演示

Answer 3

这是另一种方法：

$('.article').click(function () {
    $(".article").not($(this).addClass('current')).removeClass('current');
    $('.description').not($('.description',this).slideDown()).slideUp();
});

如何使JavaScript类切换持久化

3 个答案: