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

这很简单，将产品滑块的默认样式从display:none更改为display:block，如下所示：

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

这将导致productlider默认可见。

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

1 个答案: