Javascript 用户更改按钮时隐藏或显示元素

我将创建一个函数，它允许我隐藏一些元素（我网站上的过滤器），同时选择另一个元素（所有类别）。我正在使用Sharetribe-MarketplaceCMS，这是我的

这是我为实现这一目标而编写的一段代码，但它不起作用

document.querySelectorAll('a.home-categories-main:first-child.selected'),
function hideFilters() {
   document.getElementById('filters').style.display = 'none';
};           

---

在Rentim中，您应该使用onDocumentReady函数添加自定义脚本。它在解析HTML并呈现所有元素之后执行

onDocumentReady(function() { 
  var filters = document.querySelector('#filters');
  var allCategories = document.querySelector('.home-categories-main:first-child.selected');
  filters.style.display = allCategories ? 'block' : 'none';
});

是JSFIDLE上的一个工作示例。

这是一个使用最基本的HTML和JS组合的简单示例

没什么特别的，但很管用

HTML:

---

是JSFIDLE上的一个工作示例。

我已经尝试过使用这个脚本。当我将它粘贴到控制台时，一切都很好，但是当我将它添加到实时版本时，出现了一个错误。正如我提到的，我使用Sharetribe CMS，这个编辑器非常有限，我只能添加脚本。这些脚本被注入到标记中。这是编辑我答案的网站，请查看。嗨，谢谢你让我知道。我使用的是Sharetribe网站生成器，无法编辑代码，唯一的选择是添加自定义脚本。这些脚本被注入到标记中。

<div id="first" onclick="hideFilters();">All</div>
<div id="filters">
  <div>Price</div>
  <div>Model</div>
  <div>Date</div>
  <div>Color</div>
</div>

var a = true;
function hideFilters(){
  let x = document.getElementById("filters");
  if(a){
        x.style.display = "none";
    }else{
        x.style.display = "block";
    }
  a = !a;
}