简介

本指南将介绍如何使用 jquery 创建响应式下拉菜单，以在各种设备和浏览器上正常工作，包括支持电容笔的设备。

创建下拉菜单

1. 在 HTML 中创建下拉菜单的标记结构：
2. 为导航和列表项目分配适当的类：

nav {display: flex;justify-content: center;
}nav ul {display: flex;align-items: center;
}nav li {margin: 0 1rem;
}nav li a {display: inline-block;padding: 0.5rem 1rem;text-decoration: none;color: fff;
}

3. 隐藏子菜单项目：

nav ul ul {display: none;position: absolute;top: calc(100% + 0.5rem);left: 0;min-width: 100%;background-color: fff;box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

4. 为子菜单项目分配适当的类：

nav li:hover ul {display: block;
}nav li ul li {display: block;width: 100%;
}nav li ul li a {padding: 0.5rem 1rem;
}

使用 jQuery 脚本

1. 在 HTML 文档的底部包含 jQuery 和 jQuery 下拉菜单脚本：
2. 初始化下拉菜单脚本：

$(function() {$('nav').dropdown();
});

@media (pointer: coarse) {nav ul ul {display: none;}
}

演示

以下是使用本指南在各种设备和浏览器上创建的响应式 jQuery 下拉菜单的演示：

结论

通过遵循本指南，您可以创建响应式 jQuery 下拉菜单，这些菜单可以在各种设备和浏览器上正常工作，包括支持电容笔的设备。