<p>data-* 属性用于存储下拉菜单配置，如触发方式、目标元素、延迟时间等，通过 dataset 读取并结合 class 切换控制显示，需注意大小写转换、重复绑定、状态同步等边界问题。</p>
data-* 属性怎么存下拉菜单的配置
HTML data- 属性本质是自定义存储，不参与渲染，但能被 JS 读取。下拉菜单常用它存触发方式、目标元素、是否禁用等元信息，比硬编码在 JS 里更灵活，也方便服务端动态注入。
关键原则：属性名要语义清晰，值尽量用简单类型（字符串、数字），避免 JSON 字符串——解析麻烦还容易出错。
-
data-dropdown-trigger="click"或data-dropdown-trigger="hover"，明确交互方式 -
data-dropdown-target="#menu-1"，指向对应<ul>或<div>的 ID -
data-dropdown-delay="300"，仅 hover 时生效，单位毫秒 -
data-dropdown-disabled="true"，JS 初始化时跳过该元素
用 dataset 读取 data 属性并绑定事件
element.dataset 是最直接的读取方式，浏览器自动把 data-dropdown-target 转成 dropdownTarget（驼峰命名）。注意：dataset 只读取字符串，"true" 不等于布尔 true，需要手动转换。
const trigger = document.querySelector('[data-dropdown-trigger]');
if (trigger && trigger.dataset.dropdownDisabled !== 'true') {
const targetId = trigger.dataset.dropdownTarget;
const targetEl = document.querySelector(targetId);
const delay = parseInt(trigger.dataset.dropdownDelay) || 0;
<p>if (trigger.dataset.dropdownTrigger === 'hover') {
let timeoutId;
trigger.addEventListener('mouseenter', () => {
timeoutId = setTimeout(() => targetEl?.classList.add('show'), delay);
});
trigger.addEventListener('mouseleave', () => clearTimeout(timeoutId));
}
}data 属性和 class 切换配合控制显示逻辑
不要用 style.display = 'block' 硬写样式，而是靠 CSS 类 + data 属性驱动。这样动画、过渡、媒体查询都好控制，也方便用 :has() 做父子联动（现代浏览器）。
立即学习“前端免费学习笔记（深入）”；
- 初始状态：目标菜单加
class="dropdown-menu"和hidden属性 - JS 只负责切
show类：targetEl.classList.toggle('show') - CSS 里写：
.dropdown-menu:not(.show) { display: none; }或用opacity+transform做淡入滑动 - 如果要用
:has()实现纯 CSS 下拉（无 JS），得把触发器和菜单包在同一父容器，并用data-state="open"配合伪类
常见坑：data 属性大小写、重复绑定、移除时机
浏览器对 data- 属性名大小写不敏感，但 dataset 读取时会统一转小写+驼峰，比如 data-DropDown-Target → dropdownTarget，容易误判来源。另外，动态插入的下拉触发器不会自动绑定事件，需重新初始化或用事件委托。
- 别写
data-dropdown-target="#Menu1"和data-dropdown-target="#menu1"混用，ID 区分大小写，但 dataset 不报错，结果找不到元素 - 多次调用初始化函数会导致事件重复绑定，建议加防重标记：
if (!trigger.hasAttribute('data-dropdown-bound')) { ... trigger.setAttribute('data-dropdown-bound', 'true'); } - 菜单关闭后，hover 场景下记得清空
timeoutId；点击场景下，全局点击收起时要检查event.target是否在触发器或菜单内，否则点空白处关不掉
data 属性本身没逻辑，真正复杂的是状态同步和边界处理——比如键盘导航、焦点管理、多级嵌套时的层级遮挡，这些没法靠 data 属性解决，得靠额外的状态变量和 DOM 查询策略。
