js 二级菜单点击

在JavaScript中实现二级菜单点击功能，通常涉及到HTML结构、CSS样式和JavaScript事件处理。以下是一个简单的示例，展示如何创建一个二级菜单并处理点击事件。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级菜单示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul class="menu">
        <li>
            <a href="#">菜单1</a>
            <ul class="submenu">
                <li><a href="#">子菜单1-1</a></li>
                <li><a href="#">子菜单1-2</a></li>
            </ul>
        </li>
        <li>
            <a href="#">菜单2</a>
            <ul class="submenu">
                <li><a href="#">子菜单2-1</a></li>
                <li><a href="#">子菜单2-2</a></li>
            </ul>
        </li>
    </ul>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
.menu {
    list-style: none;
    padding: 0;
}

.menu > li {
    position: relative;
    display: inline-block;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    list-style: none;
    padding: 0;
    min-width: 150px;
}

.submenu li {
    display: block;
}

.submenu li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
}

.submenu li a:hover {
    background-color: #f0f0f0;
}

JavaScript事件处理

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.menu > li');

    menuItems.forEach(item => {
        item.addEventListener('mouseenter', function() {
            const submenu = this.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = 'block';
            }
        });

        item.addEventListener('mouseleave', function() {
            const submenu = this.querySelector('.submenu');
            if (submenu) {
                submenu.style.display = 'none';
            }
        });

        item.addEventListener('click', function(event) {
            const submenu = this.querySelector('.submenu');
            if (submenu) {
                event.preventDefault();
                submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
            }
        });
    });
});

解释

HTML结构：创建了一个包含二级菜单的列表结构。
CSS样式：定义了菜单和子菜单的样式，包括显示和隐藏子菜单的样式。
JavaScript事件处理：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 为每个菜单项添加mouseenter和mouseleave事件，用于在鼠标悬停时显示子菜单，离开时隐藏子菜单。
- 为每个菜单项添加click事件，用于在点击时切换子菜单的显示状态。

应用场景

网站导航：常见的二级菜单用于网站导航，提供更详细的分类选项。
应用界面：在桌面或移动应用中，二级菜单可以用于提供额外的功能选项。

可能遇到的问题及解决方法

子菜单不显示：检查CSS样式是否正确应用，确保子菜单的display属性在需要时设置为block。
子菜单闪烁：可能是由于事件处理不当，确保mouseenter和mouseleave事件处理逻辑正确。
点击事件不生效：确保JavaScript代码正确加载，并且事件绑定逻辑正确。

通过以上示例和解释，你应该能够实现一个基本的二级菜单点击功能，并根据需要进行调整和扩展。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js 二级菜单点击

HTML结构

CSS样式

JavaScript事件处理

解释

应用场景

可能遇到的问题及解决方法

相关·内容

139.尚硅谷_JS基础_二级菜单-过渡效果

138.尚硅谷_JS基础_二级菜单-完成基本功能

微信公众号菜单点击发送天气预报

右键菜单加密文件夹中所有JS文件

135.尚硅谷_JS基础_完成点击按钮切换图片

44.尚硅谷_jQuery_应用_二级菜单的显示隐藏.avi

flutter3_macos：基于flutter3.x实战开发桌面OS管理系统

PS小白教程:如何在Photoshop中制作雨天玻璃文字效果？

PS使用教程：如何在Mac版Photoshop中新建A4纸？

PS小白教程:如何在Photoshop中制作出水瓶上的水珠效果？

PS小白教程:如何在Photoshop中制作浮在水面上的文字效果？

PS使用教程：如何在Photoshop中合并可见图层？

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐