进入网站时显示div，但单击li时隐藏

Question

脚本

我有一个基于同位素的列表，该列表对每个类别中的产品进行了排序。 这是通过data-filter完成的。 我还添加了显示/隐藏文本的脚本onclick="toggle_visibility('#')" 。

在header.php我有以下内容：

<script>
   function toggle_visibility(id) {
      var all = document.getElementsByClassName('category');
      for(var i = 0; i < all.length; i++)
      all[i].style.display = (all[i].id == id && all[i].style.display == 'none')
      ? 'block' : 'none';
   }
</script>

在具有列表的页面（ archive.php ）上，我具有以下内容：

<ul>
    <li><a href='#' data-filter='.familiepakker' class="smoothtrans" onclick="toggle_visibility('familiepakker')">Familiepakker</a></li>
    <li><a href='#' data-filter='.effektbatterier' onclick="toggle_visibility('effektbatterier')">Effektbatterier</a></li>
    <li><a href='#' onclick="toggle_visibility('produktslider')">Produktslider</a></li>
    <!-- And so on -->
</ul>
<div id="familiepakker" class="category" style="display:none;">Text</div>
<div id="effektbatterier" class="category" style="display:none;">Text</div>
<!-- And so on -->

<div id="produktslider" class="category" style="display:none;">
    <div class="container">
        <?php echo do_shortcode('[all_around id="1"]'); ?>
    </div>
</div>      

现在，这很好用。 但是，仅当用户进入页面时才会显示#produktslider 。 单击li ，它应该消失。

现在，仅当单击li时，它才出现。 li不会在那里，而只是作为测试添加的。

您可以在这里查看页面。

您有什么想法或可行的解决方案吗？ 请问我是否不清楚。

编辑：

抱歉，不清楚。 我希望用户进入站点时看到“ produktslider”。 当用户单击li它应该消失。 这意味着“ produktslider”仅在用户进入页面时才可见。

Answer 1

好吧，这非常简单，将produckslider的默认样式从display:none更改为display:block如下所示：

<div id="produktslider" class="category" style="display:block;">

默认情况下，这将导致productlider可见。