在JavaScript中添加和删除二级菜单栏涉及到DOM操作,主要是通过元素的创建、插入和移除来实现。下面是一个简单的示例,展示了如何添加和删除二级菜单栏。
<ul id="menu">
<li>菜单1
<ul class="submenu">
<li>子菜单1.1</li>
<li>子菜单1.2</li>
</ul>
</li>
<li>菜单2</li>
</ul>
<button id="addBtn">添加二级菜单</button>
<button id="removeBtn">删除最后一个二级菜单</button>
document.getElementById('addBtn').addEventListener('click', addSubmenu);
document.getElementById('removeBtn').addEventListener('click', removeSubmenu);
function addSubmenu() {
const menu = document.getElementById('menu');
const lastLi = menu.lastElementChild;
if (lastLi && lastLi.tagName === 'LI') {
const submenu = document.createElement('ul');
submenu.className = 'submenu';
const newLi1 = document.createElement('li');
newLi1.textContent = '新子菜单1';
const newLi2 = document.createElement('li');
newLi2.textContent = '新子菜单2';
submenu.appendChild(newLi1);
submenu.appendChild(newLi2);
lastLi.appendChild(submenu);
}
}
function removeSubmenu() {
const menu = document.getElementById('menu');
const lastLi = menu.lastElementChild;
if (lastLi && lastLi.tagName === 'LI') {
const submenu = lastLi.querySelector('.submenu');
if (submenu) {
lastLi.removeChild(submenu);
}
}
}
DOMContentLoaded
事件或在<body>
标签的onload
属性中调用初始化函数。DOMContentLoaded
事件或在<body>
标签的onload
属性中调用初始化函数。通过上述方法,可以有效地管理和优化二级菜单栏的添加和删除操作。
领取专属 10元无门槛券
手把手带您无忧上云