原生JavaScript ES5中如何按需切换函数？菜单汉堡按钮增删子元素实现

一、实现子元素的添加/移除切换 #

核心思路 #

要实现子元素的切换，关键是先判断目标容器中是否已经存在目标子元素，再根据判断结果执行“添加”或“移除”操作。你可以给子元素设置特定类名来快速定位，避免误操作其他元素。

代码示例 #

先准备基础HTML结构：

<button id="hamburger-btn">🍔 汉堡按钮</button>
<div id="menu-container"></div>

然后是ES5 JavaScript代码：

// 获取DOM元素
var hamburgerBtn = document.getElementById('hamburger-btn');
var menuContainer = document.getElementById('menu-container');

// 点击事件处理
hamburgerBtn.addEventListener('click', function() {
    // 检查是否已存在菜单子元素（通过类名定位）
    var existingMenu = menuContainer.querySelector('.menu-items-wrapper');
    
    if (existingMenu) {
        // 存在则移除子元素
        menuContainer.removeChild(existingMenu);
    } else {
        // 不存在则创建并添加子元素
        var wrapper = document.createElement('div');
        wrapper.className = 'menu-items-wrapper';
        
        // 创建多个菜单项
        var homeItem = document.createElement('a');
        homeItem.href = '#home';
        homeItem.textContent = '首页';
        wrapper.appendChild(homeItem);
        
        var aboutItem = document.createElement('a');
        aboutItem.href = '#about';
        aboutItem.textContent = '关于我们';
        wrapper.appendChild(aboutItem);
        
        var contactItem = document.createElement('a');
        contactItem.href = '#contact';
        contactItem.textContent = '联系我们';
        wrapper.appendChild(contactItem);
        
        // 将菜单项容器添加到菜单容器中
        menuContainer.appendChild(wrapper);
    }
});

细节说明 #

• 使用querySelector定位子元素：相比getElementsByClassName，它返回单个静态元素，避免动态集合带来的意外问题。
• 封装创建逻辑：如果菜单项较多，可以把创建子元素的代码抽成独立函数，让代码更易维护。

二、按需切换两个函数的执行 #

核心思路 #

通过一个状态标记变量（布尔值）来记录当前应该执行哪个函数，每次点击时翻转状态，根据状态调用对应的函数。这种方式逻辑清晰，容易扩展。

代码示例 #

假设我们已经有openMenu和closeMenu两个函数，需要在点击汉堡按钮时切换执行：

// 状态标记：记录菜单是否处于打开状态
var isMenuOpen = false;

// 打开菜单的函数（可包含创建子元素、添加样式等逻辑）
function openMenu() {
    console.log('执行打开菜单逻辑');
    // 这里可以调用上面的子元素创建逻辑
    var wrapper = document.createElement('div');
    wrapper.className = 'menu-items-wrapper';
    // ...（省略菜单项创建代码）
    menuContainer.appendChild(wrapper);
    // 额外的样式操作，比如给按钮加active类
    hamburgerBtn.className = 'active';
}

// 关闭菜单的函数（可包含移除子元素、移除样式等逻辑）
function closeMenu() {
    console.log('执行关闭菜单逻辑');
    var existingMenu = menuContainer.querySelector('.menu-items-wrapper');
    if (existingMenu) {
        menuContainer.removeChild(existingMenu);
    }
    // 移除按钮的active类
    hamburgerBtn.className = '';
}

// 给汉堡按钮绑定点击事件
hamburgerBtn.addEventListener('click', function() {
    // 根据状态执行对应函数
    if (isMenuOpen) {
        closeMenu();
    } else {
        openMenu();
    }
    // 翻转状态标记
    isMenuOpen = !isMenuOpen;
});

进阶优化 #

如果需要更灵活的切换（比如不止两个函数），可以用对象映射状态和对应的函数，但对于菜单场景，布尔值标记已经足够简洁实用。

内容的提问来源于stack exchange，提问作者Aurelian Spodarec