jQuery .toggle() 使按钮消失

Question

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

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

问题：我相信 .toggle(fn1{}, fn2{}) 方法是正确的方法，fn1 会在按钮上显示选定的 class 并且只显示相应的项目，而 fn2 会 return 一切恢复原状。但是，当使用 .toggle() 方法时，它会使整个按钮消失（当前应用于 'web design' 按钮）。

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

jQuery .toggle() 使按钮消失

jQuery .toggle() making button disappear

jquery

html

css

frontend