jQuery .toggle() 使按钮消失

Question

我有一个过滤器导航栏，当单击每个按钮时，它只显示具有相应类别的那些元素。单击所有按钮时，它会显示所有这些。此外，当单击按钮时，它会添加选定的类，这会更改背景颜色。

目标:当按钮被第二次点击时(如果它已经被选中)，再次显示所有内容并取消选择按钮。

问题:我相信使用 .toggle(fn1{}, fn2{}) 方法是正确的方法，fn1 会在按钮上显示选定的类并且只显示相应的元素，然后 fn2 会将所有内容返回到原始显示。但是，当使用 .toggle() 方法时，它会使整个按钮消失(当前应用于“网页设计”按钮)。

所以这是 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