javascript - 进入站点时显示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 不会出现在那里，只是作为测试添加的。

您可以查看页面here 。

您有什么想法或可行的解决方案吗？如果我不清楚，请询问。

编辑:

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

Answer 1

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

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

这将导致 productslider 默认可见。