jQuery .toggle() кнопка создания исчезает

Question

У меня есть панель навигации фильтра, которая при нажатии каждой кнопки отображает только те проекты с соответствующей категорией. Когда нажимается кнопка «Все», отображается все из них. Кроме того, при нажатии кнопки он добавляет выбранный класс, который меняет цвет фона.

Цель: Когда кнопка будет нажата второй раз (если она уже выбрана), чтобы все отобразилось и кнопка была отменена.

Проблема: я считаю, что метод .toggle(fn1{}, fn2{}) будет правильным путем, где fn1 отобразит выбранный класс на кнопке и отобразит только соответствующие проекты, а fn2 вернет все обратно к исходному дисплею. Однако, при использовании метода .toggle(), вся кнопка исчезает (в настоящее время применяется к кнопке «веб-дизайн»).

Так что heres JSFiddle.

Answer 1

Вы можете сделать что-то вроде

var $all = $("#projects").find("li.wrap"); 

$('#all-btn').click(function() { 
    $("#nav-filter li").removeClass("selected"); 
    $(this).addClass("selected"); 
    $all.fadeIn(1000); 
}); 

//toggle is making button dissappear 
$('#nav-filter li[data-type]').click(function() { 
    var $this = $(this), 
     $clis = $all.filter('.' + this.dataset.type) 
    $this.toggleClass("selected"); 
    $('#nav-filter li').not(this).removeClass('selected'); 
    if ($this.hasClass('selected')) { 
     $all.not($clis).fadeOut(1000); 
     $clis.fadeIn(1000); 
    } else { 
     $all.fadeIn(1000); 
    } 
}); 

Демо: Fiddle