本文详解如何使用 jQuery 监听自定义下拉菜单（非原生 ）中 元素的点击事件，提取其 perma 自定义属性值，并实时更新目标按钮或链接的 href 属性，实现无缝跳转逻辑。

本文详解如何使用 jquery 监听自定义下拉菜单（非原生 ``）中 `` 元素的点击事件，提取其 `perma` 自定义属性值，并实时更新目标按钮或链接的 `href` 属性，实现无缝跳转逻辑。

在实际前端开发中，许多“下拉菜单”并非使用标准 元素，而是基于

+ 的自定义结构（如您提供的 .dropdown-list），以获得更灵活的样式与交互控制。这类结构虽不具原生表单语义，但可通过 jQuery 精准捕获用户操作，并将自定义属性（如 perma）映射到其他 DOM 元素（如按钮或链接）上，从而驱动后续行为（例如页面跳转）。

✅ 核心实现逻辑

您的 HTML 结构如下：

<div class="dropdown-list">
  <div><a href="https://www.php.cn/link/6dbe523032e74da51d47dd44aa7ed477" perma="http://test.com/xxxx1/">Link 1</a></div>
  <div><a href="#3302" perma="http://test.com/xxxx2/">Link 2</a></div>
  <div><a href="#3303" perma="http://test.com/xxxx3/">Link 3</a></div>
</div>
<a id="myButton" href="http://test.com/default/">Go</a>

关键点在于：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

• perma 是自定义属性（非标准 HTML 属性），应通过 .attr('perma') 获取（而非 .data('perma')，因 data-* 属性需经 jQuery 解析且会自动转换驼峰命名，而 perma 无连字符，直接用 attr 更可靠、语义清晰）；
• 点击事件需绑定在 上（而非
  ），确保精准捕获目标元素；
• 更新目标链接时，推荐使用 $("#myButton").attr("href", value)，而非修改 innerHTML 或 text()，以保持语义与可访问性。

✅ 完整可运行代码（含防错与最佳实践）

<!-- HTML -->
<div class="input-dropdown">
  <input type="text" placeholder="选择链接..." readonly><i>▼</i>
  <div class="dropdown-list">
    <div><a href="https://www.php.cn/link/6dbe523032e74da51d47dd44aa7ed477" perma="http://test.com/xxxx1/">文档 A</a></div>
    <div><a href="#3302" perma="http://test.com/xxxx2/">文档 B</a></div>
    <div><a href="#3303" perma="http://test.com/xxxx3/">文档 C</a></div>
  </div>
</div>

<a id="goButton" href="https://example.com" target="_blank" class="btn">前往链接</a>

// jQuery 初始化逻辑（建议包裹在 $(document).ready() 中）
$(function() {
  // 1. 下拉展开/收起逻辑（您已提供，此处保留兼容性）
  $('.input-dropdown input, .input-dropdown > i').on('click', function() {
    const $parent = $(this).closest('.input-dropdown');
    const $list = $parent.find('.dropdown-list');
    $list.slideToggle(300);
  });

  // 2. ✅ 关键：点击下拉项时，提取 perma 并更新按钮 href
  $('.dropdown-list a').on('click', function(e) {
    e.preventDefault(); // 阻止默认锚点跳转（https://www.php.cn/link/6dbe523032e74da51d47dd44aa7ed477 等）

    const permaUrl = $(this).attr('perma'); // ✅ 正确获取自定义属性
    if (permaUrl && permaUrl.trim()) {
      $('#goButton').attr('href', permaUrl);
      console.log('已更新按钮 href 为:', permaUrl);
    } else {
      console.warn('警告：当前选项缺少有效的 perma 属性');
    }

    // 可选：同步关闭下拉菜单
    $(this).closest('.dropdown-list').slideUp(300);
  });

  // 3. 全局点击收起（您已有，保持一致）
  $(document).on('click', function(e) {
    if (!$(e.target).closest('.input-dropdown').length) {
      $('.input-dropdown .dropdown-list:visible').slideUp(300);
    }
  });
});

⚠️ 注意事项与常见误区

问题	正确做法	错误示例
获取 perma 值	使用 .attr('perma') —— 直接读取 HTML 属性原始值	❌ .data('perma')（仅适用于 data-perma）
绑定事件位置	绑定在 上（最精确），避免父级 冒泡干扰	❌ 绑定在 .dropdown-list div 上再找子 a，易出错
阻止默认行为	e.preventDefault() 必须调用，否则页面会跳转至 https://www.php.cn/link/6dbe523032e74da51d47dd44aa7ed477 等锚点	❌ 忽略该行，导致页面意外滚动
空值防护	检查 permaUrl 是否存在且非空字符串	❌ 直接赋值，可能设为空 href 导致跳转失败
DOM 就绪时机	所有 jQuery 代码置于 $(function(){...}) 或 $(document).ready() 中	❌ 脚本放在 且未延迟执行，导致元素未加载

? 扩展建议（进阶场景）

• 支持按钮点击跳转：若目标是 而非 ，可改用 window.location.href = permaUrl 触发跳转；
• 添加视觉反馈：点击后为 #goButton 添加临时 active 类，提示用户已就绪；
• 持久化选择状态：结合 localStorage 缓存上次选中的 perma，页面刷新后自动恢复；
• 无障碍增强：为 .dropdown-list a 添加 role="option" 和 aria-selected，提升屏幕阅读器兼容性。

通过以上方案，您即可稳定、高效地将自定义下拉菜单中的 perma 属性值实时注入目标链接，兼顾功能正确性、代码可维护性与用户体验一致性。