javascript - 如何将过滤器脚本设置为仅在网站首次加载时显示网站上默认按钮位置的项目？

Question

我的网站中有一个项目部分，有 3 个按钮。每个按钮都会过滤到一个特定的项目。过滤器可以工作，但问题是当页面加载时，它显示所有 3 个项目，而不是仅显示与当前事件按钮相关的 1 个项目。

我不确定要添加什么代码才能仅显示默认事件按钮的当前项目。任何帮助将不胜感激

我尝试添加一个 css(display-none) 脚本，该脚本隐藏该项目，但不会将其恢复，并将网站上的空间留为空白，就好像它仍然存在一样。

(function(){

'use strict';


var $projects = $('.projects');

$projects.isotope({
    itemSelector: '.item',
    layoutMode: 'fitRows'
});

$('ul.filters > li').on('click', function(e){

    e.preventDefault();

    var filter = $(this).attr('data-filter');

    $('ul.filters > li').removeClass('active');
    $(this).addClass('active');

    $projects.isotope({filter: filter});

});

Answer 1

display: none; 不会隐藏标签(参见opacity: 0;)，它根本不渲染它，因此所有相关规则均不适用。如果仍然有空白空间，则意味着其父元素正在强制执行该操作，而不是带有 display: none; 的子元素。

如果是这种情况，您可能可以重构父级的规则或将 display: none; 移动到父级。

如果您提前知道默认情况是什么，您可以将其硬编码到 html/css 中，并在需要时进一步操作它。否则，您可以使用 javascript 在运行时计算它。