Question

我正在尝试在单词印刷页面上创建许多列表。每个人都有自己的div。例如：

    <strong>List One</strong>
    <div>
      <ul>
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
        <li>Item Four</li>
        <li>Item Five</li>
      </ul>
    </div>

    <strong>List Two</strong>
    <div>
      <ul>
        <li>Item Uno</li>
        <li>Item Dos</li>
        <li>Item Tre</li>
      </ul>
    </div>

我希望列表标题文本可以点击

<strong><a href="#">List One</a></strong>

并在单击时隐藏或显示。

其中默认值应隐藏

<div style="display: none";>
 ...
</div>

我可以使用javascript 9（见下文）来执行此操作，但是，它似乎与wordpress / php / template / plugins等冲突。

尽管我的页面只有文字和代码（请参见下文），但不能100％正常工作。有时需要多次点击才能起作用

    function toggle_visibility(id) {
      var e = document.getElementById(id);
      if (e.style.display == 'block')
        e.style.display = 'none';
      else
        e.style.display = 'block';
    }
    <strong><a href="#"  onclick="toggle_visibility('list_one');">List One</a></strong>
    <div id="list_one" style="display: none">
      <ul>
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
        <li>Item Four</li>
        <li>Item Five</li>
      </ul>
    </div>

    <strong><a href="#"  onclick="toggle_visibility('list_two');">List Two</a></strong>
    <div id="list_two" style="display: none">
      <ul>
        <li>Item Uno</li>
        <li>Item Dos</li>
        <li>Item Tre</li>
      </ul>
    </div>

问题：是否可以通过另一种方式获得相同的影响。即点击链接显示或隐藏DIV吗？

Answer 1

尝试通过wp_footer钩子添加脚本。只需在回调函数中输入您的javascript函数即可。

    function custom_js_functions(){
      <script>
          //your code goes here.
      </script>
    }
    add_action('wp_footer', 'custom_js_functions');

Javascript代码无法在Wordpress页面内运行

1 个答案: