Как сделать класс тумблер JavaScript упорного

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); 

Здравствуйте, я хотел бы знать, как научиться делать несколько вещей с моим маленьким на кнопку переключения списка:

Im имея трудно сделать так, чтобы этот список переключений оставался постоянным после того, как пользователь нажимает на уже открытую статью. Прямо сейчас, как мне это настроить, текущая статья будет переключаться всякий раз, когда вы нажимаете, я бы хотел, чтобы она оставалась открытой и закрывалась только при нажатии на заголовок (против чего-либо в элементе).

Также
+ Как создать открытый/закрыть все коленно-рычажного
+ непрерывность визуальной информации, которая показывает список может быть расширен, и если он открыт или закрыт, который будет соответствовать этому стилю

Answer 1

Вы должны целевой .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 2

Если вы не хотите щелкнуть дочерний элемент, чтобы вызвать закрытие основного заголовка, вам необходимо остановить распространение события.

Пожалуйста, проверьте полный синтаксис/использования: How to stop event bubbling on checkbox click

Использование:

event.stopPropagation() 

Answer 3

Здесь более простой пример ch:

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