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

jQuery .toggle（）制作按钮消失

1 个答案: