css - WordPress 类别过滤器

Question

我有一个 Wordpress 网站，您可以在这里查看:PRAXIS3.com .

在“汽车”这个特定页面上，我有一个类别过滤器。当我第一次加载页面时，默认的“All”类别被选中，但如果您第二次或第三次单击“All”，它会显示每个投资组合元素在网站上。下面是类别选择器代码的前几行。

类别选择器代码:

<div class="btCatFilter">
    <span class="btCatFilterTitle">Category filter:</span>
    <span class="btCatFilterItem all" data-slug="">All</span>
    <span class="btCatFilterItem" data-slug="acura">Acura</span>
    <span class="btCatFilterItem" data-slug="alfa-romeo">Alfa Romeo</span>
</div>

我在页面上设置了一些自定义 CSS(以隐藏某些类别不显示)，您可以在下面查看。

.automotive .btCatFilterItem[data-slug*="architecture"] {display: none;}
.automotive .btCatFilterItem[data-slug*="automotive"] {display: none;}
.automotive .btCatFilterItem[data-slug*="branding"] {display: none;}
.automotive .btCatFilterItem[data-slug*="civic"] {display: none;}
.automotive .btCatFilterItem[data-slug*="conceptual"] {display: none;}
.automotive .btCatFilterItem[data-slug*="hospitality"] {display: none;}
.automotive .btCatFilterItem[data-slug*="education"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="environmental-graphics"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="interior-design"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="mixed-use-residential"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="office"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="signage-wayfinding"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="financial"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="retail"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="rollout"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="sustainable"] {display: none;} 
.automotive .btCatFilterItem[data-slug*="workplace"] {display: none;}

我试图让它在您单击“所有”时显示“汽车”类别中的每个元素。

我已经尝试了以下我能想到的每一次迭代，但没有任何效果。

.automotive .btCatFilterItem.all {display: "automotive";}
.automotive .btCatFilterItem.all {display: automotive;}
.automotive .btCatFilterItem.all {display: data-slug*="automotive";}

如有任何帮助，我们将不胜感激。谢谢!

Answer 1

所以我认为这实际上是一个数据库问题，而不是 CSS 甚至 Javascript。

看看您的站点，每次选择过滤器时，类别过滤器实际上会销毁所有图 block 并通过 Ajax 将适当的图 block 重新加载到页面上。这意味着过滤器不会隐藏/显示图 block ，它实际上每次都会重新填充页面上的内容。

我建议查看插件设置，看看是否有什么可以调整以提取汽车内容。

但也许这不是一个选择......

您的磁贴本身需要统一的类或属性才能使用 CSS 或 Javascript 定位。它们都具有相同的 class="gridItem bt11 btGridItemLoaded"。

如果你想尝试将它组合在一起，你需要编辑生成图 block 的脚本并添加一个统一的类或属性，比如“汽车”，然后你可以用类似的东西隐藏所有其他图 block

.automotive .btGridItemLoaded:not(.automotive) { 显示:无； }

顺便说一句

您使用的值对 display 属性无效。 display 属性有一组固定的值，例如 block、inline-block、none 和 继承等等。