从代码隐藏中展开子菜单可以通过以下步骤实现:
以下是一个示例代码:
HTML:
<ul class="menu">
<li class="menu-item" data-submenu="submenu1">主菜单1
<ul class="submenu" id="submenu1">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</li>
<li class="menu-item" data-submenu="submenu2">主菜单2
<ul class="submenu" id="submenu2">
<li>子菜单4</li>
<li>子菜单5</li>
<li>子菜单6</li>
</ul>
</li>
</ul>
CSS:
.submenu {
display: none;
}
JavaScript:
const menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(item => {
item.addEventListener('click', function() {
const submenuId = this.getAttribute('data-submenu');
const submenu = document.getElementById(submenuId);
if (submenu.style.display === 'none') {
submenu.style.display = 'block';
} else {
submenu.style.display = 'none';
}
});
});
这样,当用户点击主菜单项时,对应的子菜单就会展开或收起。可以根据实际需求进行样式和交互的调整。
腾讯云相关产品推荐:腾讯云云服务器(CVM)是一种弹性计算服务,提供安全可靠、弹性扩展的云端计算能力,适用于各类应用场景。详情请参考腾讯云云服务器产品介绍:https://cloud.tencent.com/product/cvm
领取专属 10元无门槛券
手把手带您无忧上云