WordPress 锚点点击 JavaScript 打开详情答案

【问题标题】：WordPress anchor click JavaScript open detailsWordPress 锚点点击 JavaScript 打开详情
【发布时间】：2019-10-21 22:50:54
【问题描述】：

我有一个 WooCommerce 网店，我在其中将独特的 href 锚点放在产品变体标签旁边：

页面下方是我想要在单击相应锚点时打开的 HTML（详细信息和摘要）。我不想在 href 中使用 onclick。

(html above) 
<a class="extra_label" id="lunch" href="#anchor">i</a>

(html below) 
<details id="det">
    <summary><a class="leesmeer">Uitgebreide Lunch</a></summary>
    blablabla
</details>

我已经包含了 html ID 和 JavaScript：

<script>
    document.getElementById("lunch").addEventListener("click", displayopen);

    function displayopen() {
        document.getElementById("det").open = true;
    }
</script>

但到目前为止它不起作用。

【问题讨论】：

什么是JS控制台错误？
好点：typeError: document.getElementById(...) is null

标签： javascript wordpress

【解决方案1】：

您的节目元素似乎有误。如果你想显示元素，你应该使用： document.getElementById("det").style.display = 'block'; 并隐藏它： document.getElementById("det").style.display = 'none';

或者您可以使用类来指示隐藏/显示状态。

【讨论】：

不幸的是，它是关于需要在点击时打开的 html 详细信息。因此，必须将属性 open 添加到详细信息中。但我在控制台中看到错误 TypeError: document.getElementById(...) is null

【解决方案2】：

抱歉，原来我需要正确地将脚本排入队列，我在标题中回显了它，但这是不好的做法，也不起作用......无论如何，谢谢！

【讨论】：