Wordpress类别筛选
我有一个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;}我正在尝试使它当你点击"All“时，它会显示”汽车“类别中的每个项目。
我已经尝试了下面所有我能想到的迭代，但没有一个是有效的。
.automotive .btCatFilterItem.all {display: "automotive";}
.automotive .btCatFilterItem.all {display: automotive;}
.automotive .btCatFilterItem.all {display: data-slug*="automotive";}任何帮助都将不胜感激。谢谢!
回答 1
Stack Overflow用户
发布于 2019-03-21 06:51:15
所以我认为这实际上是一个数据库问题，而不是CSS甚至是Javascript。
查看您的站点，类别过滤器实际上正在销毁所有的磁贴，并在每次选择一个过滤器时通过Ajax将适当的磁贴重新加载到页面上。这意味着过滤器不会隐藏/显示磁贴，它实际上每次都会重新填充页面上的内容。
我建议查看插件设置，看看有没有什么可以调整的，以拉出你的汽车内容。
但也许这不是一种选择。
您的tiles本身需要统一的类或属性，以便以CSS或Javascript为目标。它们都有相同的class="gridItem bt11 btGridItemLoaded"。
如果您想尝试将它们组合在一起，您需要编辑生成分块的脚本，并添加一个统一的类或属性，如"automotive"，然后您可以使用如下内容隐藏所有其他分块
.automotive .btGridItemLoaded:not(.automotive) { display:none; }
顺便说一句
您使用的值对于display属性无效。display属性具有一组固定的值，如block、inline-block、none和inherit等。
https://stackoverflow.com/questions/55267650
复制相似问题