如何在WordPress菜单中使用JavaScript实现点击显示子列表功能

步骤1：添加显示/隐藏功能的JavaScript代码 #

你可以通过两种方式把showhide函数整合到WordPress中：

方法一：直接在主题底部添加脚本（快速实现）

编辑当前激活主题的footer.php文件，找到</body>标签，在它前面插入以下代码：

<script>
function showhide(id){
    if (document.getElementById){
        obj = document.getElementById(id);
        if (obj.style.display == "none"){
            obj.style.display = "";
        } else {
            obj.style.display = "none";
        }
    }
}
</script>

方法二：通过函数注册脚本（规范做法）

1. 在主题目录下创建js文件夹，新建showhide.js文件，写入你的函数：

function showhide(id){
    if (document.getElementById){
        obj = document.getElementById(id);
        if (obj.style.display == "none"){
            obj.style.display = "";
        } else {
            obj.style.display = "none";
        }
    }
}

2. 编辑主题的functions.php文件，添加以下代码来注册并加载这个脚本：

function enqueue_showhide_script() {
    wp_enqueue_script( 'showhide-script', get_template_directory_uri() . '/js/showhide.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_showhide_script' );

步骤2：构建可交互的菜单结构 #

进入WordPress后台的「外观」->「菜单」页面，按以下方式创建菜单：

方式一：使用自定义HTML菜单项（匹配你的示例结构）

1. 点击页面顶部的「屏幕选项」，确保「自定义HTML」选项已勾选。
2. 添加一个自定义HTML菜单项，写入主触发链接：

<a href="#" onclick="showhide('a'); return(false);">a</a>

3. 在这个菜单项下方，再添加一个自定义HTML菜单项，放入隐藏的子列表：

<div style="display: none;" id="a"> 
    <ul>
        <li><a href="#">a 1</a></li>
        <li><a href="#">a 2</a></li>
        <li><a href="#">a 3</a></li>
    </ul>
</div>

4. 重复上述步骤创建「b」相关的菜单项和子列表。

方式二：使用常规菜单项+事件绑定（更规范，避免内联JS）

如果你不想用内联onclick事件，可以用这种方式：

1. 添加自定义链接作为主菜单项，链接填#，导航标签填「a」；点击「屏幕选项」勾选「CSS类」，给这个菜单项添加CSS类showhide-trigger，并开启「自定义属性」后添加data-target="a"。
2. 在菜单的合适位置添加自定义HTML菜单项，放入隐藏的子列表：

<div style="display: none;" id="a" class="showhide-content"> 
    <ul>
        <li><a href="#">a 1</a></li>
        <li><a href="#">a 2</a></li>
        <li><a href="#">a 3</a></li>
    </ul>
</div>

3. 修改showhide.js的代码为事件绑定版本，这样不需要内联脚本：

document.addEventListener('DOMContentLoaded', function() {
    const triggers = document.querySelectorAll('.showhide-trigger');
    triggers.forEach(trigger => {
        trigger.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('data-target');
            const obj = document.getElementById(targetId);
            if (obj) {
                obj.style.display = obj.style.display === 'none' ? '' : 'none';
            }
        });
    });
});

步骤3：可选样式调整 #

如果需要美化子列表，可以在「外观」->「自定义」->「额外CSS」中添加样式，比如：

.showhide-content {
    margin: 10px 0 0 20px;
    padding: 8px;
    background-color: #f9f9f9;
    border-radius: 4px;
}
.showhide-content ul {
    list-style: disc;
    margin: 0;
    padding-left: 20px;
}

内容的提问来源于stack exchange，提问作者a-m-h-t