本教程将指导您如何使用jQuery和CSS创建带有图片功能的自定义下拉菜单，并重点解决在页面中存在多个此类下拉菜单时，如何确保它们能够独立运行，避免事件冲突和内容混淆。通过结构优化和事件委托，我们将实现每个下拉菜单的独立初始化、内容填充和交互逻辑。

1. 问题背景与挑战

在构建现代web界面时，我们经常需要自定义html 元素的样式，使其包含图片或其他富文本内容。当页面中存在多个这样的自定义下拉菜单时，一个常见的问题是它们的事件处理可能会相互干扰，导致点击一个下拉菜单时，其他下拉菜单也意外打开，或者显示了不属于自己的内容。这通常是由于使用了全局变量、不精确的dom选择器或事件处理逻辑未能正确限定作用域所致。

2. 核心HTML结构

为了实现带图片的自定义下拉菜单，我们需要一套特定的HTML结构来替代原生的 元素。以下是推荐的结构：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- 第一个下拉菜单实例 -->
<div class="box" id="one">
  <!-- 隐藏的原生select，作为数据源 -->
  <select class="vodiapicker">
    <option>Select one</option>
    <option value="en" class="test" data-thumbnail="images/3.png">
      English
    </option>
    <option value="au" data-thumbnail="images/3.png">Engllish (AU)</option>
  </select>

  <!-- 自定义下拉菜单的UI容器 -->
  <div class="lang-select">
    <!-- 显示当前选中项的按钮 -->
    <button class="btn-select" value=""></button>
    <!-- 下拉列表容器 -->
    <div class="b">
      <ul class="lang-options-list"></ul> <!-- 推荐使用类名而非重复ID -->
    </div>
  </div>
</div>

<!-- 第二个下拉菜单实例 -->
<div class="box" id="two">
  <select class="vodiapicker">
    <option>Select one</option>
    <option value="en" class="test" data-thumbnail="images/3.png">
      french
    </option>
    <option value="au" data-thumbnail="images/3.png">french F</option>
  </select>

  <div class="lang-select">
    <button class="btn-select" value=""></button>
    <div class="b">
      <ul class="lang-options-list"></ul> <!-- 推荐使用类名而非重复ID -->
    </div>
  </div>
</div>

结构说明：

• .box：每个自定义下拉菜单的独立容器，用于封装一个完整的下拉菜单实例。每个 .box 都应有一个唯一的 id (例如 one, two)，以便在必要时进行特定操作。
• .vodiapicker：这是隐藏的原生 元素，它作为数据源，我们从其 标签中提取 value、innerText 和 data-thumbnail 属性来构建自定义下拉列表。
• .lang-select：自定义下拉菜单的可见UI部分。
• .btn-select：一个 元素，用于显示当前选中的项，并作为点击触发下拉列表显示/隐藏的交互点。
• .b：一个 div 元素，作为实际下拉选项列表的容器，初始状态下应隐藏。
• ul.lang-options-list：用于承载由
• 元素组成的下拉选项列表。重要提示： 原始代码中使用了重复的 id="a"。在HTML中，ID必须是唯一的。为了避免潜在的DOM选择器问题和保持HTML规范性，强烈建议将其改为类选择器，例如 class="lang-options-list"，并在jQuery代码中使用相应的类选择器进行查找。

3. 关键CSS样式

CSS用于隐藏原生 元素，并美化自定义的按钮和下拉列表。

.vodiapicker {
  display: none; /* 隐藏原生的select元素 */
}

.lang-options-list { /* 替代#a */
  padding-left: 0px;
}

.lang-options-list img,
.btn-select img {
  width: 18px; /* 选项和按钮中图片的宽度 */
}

.lang-options-list li { /* 替代#a li */
  list-style: none;
  padding-top: 5px;
  padding-bottom: 5px;
}

.lang-options-list li:hover { /* 替代#a li:hover */
  background-color: #f4f3f3; /* 选项悬停背景色 */
}

.lang-options-list li img { /* 替代#a li img */
  margin: 5px;
}

.lang-options-list li span,
.btn-select li span { /* 替代#a li span */
  margin-left: 30px;
}

/* 下拉列表容器样式 */
.b {
  display: none; /* 初始隐藏 */
  width: 100%;
  max-width: 350px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  position: absolute; /* 使下拉列表浮动在其他内容之上 */
  background-color: #fff; /* 背景色 */
  z-index: 1000; /* 确保在最上层 */
}

.open {
  display: block !important; /* 用于强制显示下拉列表 */
}

/* 自定义按钮样式 */
.btn-select {
  margin-top: 10px;
  width: 100%;
  max-width: 350px;
  height: 34px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  text-align: left; /* 文本左对齐 */
  padding: 0 10px; /* 按钮内边距 */
  cursor: pointer; /* 鼠标指针 */
}

.btn-select li {
  list-style: none;
  float: left;
  padding-bottom: 0px;
}

.btn-select:hover li {
  margin-left: 0px;
}

.btn-select:hover {
  background-color: #f4f3f3;
  border: 1px solid transparent;
  box-shadow: inset 0 0px 0px 1px #ccc;
}

.btn-select:focus {
  outline: none; /* 移除焦点轮廓 */
}

.lang-select {
  /* margin-left: 50px; */ /* 根据需要调整 */
  position: relative; /* 使下拉列表相对于此容器定位 */
}

CSS要点：

UXbot

AI产品设计工具

185 查看详情

• .vodiapicker { display: none; } 隐藏了原生的 元素。
• .b { display: none; } 确保下拉列表在初始状态下是隐藏的。
• .btn-select 和 ul.lang-options-list li 定义了自定义下拉菜单按钮和选项的外观。
• .b 容器的 position: absolute; 和 z-index 确保下拉列表能够正确浮动并显示在其他内容之上。

4. jQuery实现：独立化与事件管理

J*aScript是实现自定义下拉菜单交互逻辑的核心。为了确保多个实例能够独立工作，关键在于使用正确的DOM遍历和作用域管理。

$(function() { // 确保DOM加载完毕后执行
  // 1. 初始化每个下拉菜单实例
  $(".box").each(function() {
    let langArray = []; // 为每个.box实例创建独立的langArray，避免数据混淆
    const $currentBox = $(this); // 缓存当前.box元素

    $currentBox.find(".vodiapicker option").each(function() {
      let img = $(this).attr("data-thumbnail");
      let text = this.innerText;
      let value = $(this).val();
      let item =
        '<li>@@##@@<span>' +
        text +
        "</span></li>";
      langArray.push(item);
    });

    // 将生成的列表项填充到当前.box内的ul元素
    $currentBox.find(".lang-options-list").html(langArray.join('')); // 使用类选择器并join数组

    // 设置初始按钮显示内容和值
    $currentBox.find(".btn-select").html(langArray[0]);
    // 假设第一个选项的值是'en'，或者根据实际需求从langArray[0]中解析
    // 这里为了示例，直接设为'en'，实际应从第一个option或langArray[0]中获取
    $currentBox.find(".btn-select").attr("value", $currentBox.find(".vodiapicker option:eq(1)").val()); 
  });

  // 2. 点击下拉列表项 (li) 事件处理
  // 使用事件委托，因为li是动态生成的
  $(document).on('click', '.lang-options-list li', function() {
    const $clickedLi = $(this);
    const img = $clickedLi.find("img").attr("src");
    const value = $clickedLi.find("img").attr("value"); // 注意：img上的value属性可能不是标准做法，通常从li或其子元素获取
    const text = $clickedLi.text(); // 获取文本内容，不包含img alt
    let item =
      '<li>@@##@@<span>' + text + "</span></li>";

    // 找到当前li所属的lang-select容器，并更新其内部的btn-select和关闭其b
    const $parentLangSelect = $clickedLi.parents("div.lang-select");
    $parentLangSelect.find(".btn-select").html(item);
    $parentLangSelect.find(".btn-select").attr("value", value);
    $parentLangSelect.find(".b").toggle(); // 关闭当前下拉列表
  });

  // 3. 点击自定义按钮 (.btn-select) 事件处理
  $(".btn-select").click(function() {
    const $currentBtn = $(this);
    const $parentLangSelect = $currentBtn.parents("div.lang-select");
    const $currentDropdown = $parentLangSelect.find(".b");

    // 切换当前下拉列表的显示状态
    $currentDropdown.toggle();

    // 关闭其他可能打开的下拉列表
    $(".box").each(function() {
      const $otherBox = $(this);
      const $otherDropdown = $otherBox.find(".b");
      // 如果不是当前下拉列表，且处于可见状态，则关闭
      if (!$otherBox.is($currentBtn.parents(".box")) && $otherDropdown.is(':visible')) {
        $otherDropdown.toggle();
      }
    });
  });

  // 4. 点击页面其他区域关闭下拉菜单
  $(document).click(function(event) {
    // 检查点击事件的目标是否是任何.btn-select按钮或其内部元素
    // 或者是否是任何.lang-options-list li或其内部元素
    if (!$(event.target).closest(".btn-select").length && !$(event.target).closest(".b").length) {
      // 如果点击发生在.btn-select或.b之外，则关闭所有可见的下拉列表
      $(".b").each(function() {
        if ($(this).is(':visible')) {
          $(this).toggle();
        }
      });
    }
  });
});

J*aScript要点：

• $(function() { ... });：确保所有代码在DOM完全加载后再执行。
• $(".box").each(function() { ... });：这是实现独立性的关键。通过遍历每个 .box 容器，我们可以在其内部处理逻辑，确保每个下拉菜单的数据和UI操作都限定在自己的作用域内。
• let langArray = [];：在 each 循环内部声明 langArray，确保每个 .box 实例都有自己的选项数组，避免不同下拉菜单的数据相互污染。
• $currentBox.find(".lang-options-list").html(langArray.join(''));：使用 find() 方法结合类选择器 .lang-options-list 来精确地定位当前 .box 内部的 ul 元素，并填充内容。join('') 将数组元素连接成一个字符串。
• 事件委托 $(document).on('click', '.lang-options-list li', function() { ... });：对于动态生成的
• 元素，使用事件委托可以确保事件绑定在父元素上，即使
• 元素是后来添加的，事件也能正常触发。
• $(this).parents("div.lang-select")：在 li 和 btn-select 的点击事件中，parents("div.lang-select") 是一个非常重要的选择器。它允许我们从被点击的元素向上查找最近的 div.lang-select 父容器，从而将后续的操作（如更新 btn-select 的内容或关闭 div.b）限定在当前下拉菜单实例的作用域内。
• 关闭其他下拉菜单的逻辑：
  • 在 btn-select 的点击事件中，通过遍历所有 .box 并检查其 .b 是否可见，可以关闭除当前点击下拉菜单之外的其他所有打开的下拉菜单。这避免了多个下拉菜单同时打开的情况。
  • $(document).click() 事件用于处理点击页面其他区域时关闭所有打开的下拉菜单。通过判断点击目标是否在 .btn-select 或 .b 内部，来决定是否执行关闭操作。

5. 注意事项与最佳实践

• 避免ID重复：再次强调，HTML中的 id 属性必须是唯一的。在示例中，我们将 id="a" 改为 class="lang-options-list"。如果必须使用ID，请确保每个实例的ID都是动态生成且唯一的。
• 作用域管理：在循环中使用 let 关键字声明变量，可以确保变量的作用域限定在当前循环迭代中，有效避免全局变量带来的数据冲突。
• 可访问性 (Accessibility)：为了提高自定义下拉菜单的可访问性，建议添加ARIA属性，例如 role="combobox"、aria-haspopup="listbox"、aria-expanded 等，并处理键盘导航事件，以便屏幕阅读器用户和键盘用户也能正常使用。
• 图片显示方式：在 btn-select 中显示图片时，如果图片不参与点击事件，可以考虑使用CSS `background

以上就是jQuery自定义带图片下拉菜单：多实例独立事件处理指南的详细内容，更多请关注其它相关文章！

相关文章： 在J*a中如何开发简易电子商务商品管理系统_商品管理系统项目实战解析  在J*a中如何捕获IndexOutOfBoundsException_索引越界异常防护方法说明  c++中的std::basic_string的SSO优化_c++短字符串优化深度解析  Go语言中构建可靠数据存储的原子性与持久化策略  c++中的std::forward_list和std::list有什么不同_c++ forward_list与list区别分析  移动端XML文件怎么转换成Excel 手机和平板上的解决方案  Python多版本共存与虚拟环境管理深度指南  Python getattr() 异常处理深度解析：避免程序意外退出  Lar*el的路由模型绑定怎么用_Lar*el Route Model Binding简化控制器逻辑  Discord Slash 命令响应超时问题的异步解决方案  Shopware订单中获取产品自定义字段的实用指南  Python异步编程实践：使用Binance API构建实时交易数据流  HTML元素状态管理：根据DIV内容动态启用/禁用按钮  微信聊天记录怎么加密_微信聊天记录加密方法  手机CPU怎么影响游戏体验_手机CPU对游戏性能的影响分析  composer的"require-dev"部分是用来做什么的？  Android Studio计算器C键功能异常排查与修复教程  谷歌浏览器最新官方入口链接 谷歌浏览器网页版官网导航  excel怎么制作工资条 excel快速生成工资条的方法  漫蛙MANWA漫画主页官方入口 漫蛙漫画最新在线阅读地址  修复二维数组索引越界异常：一维循环到二维坐标的正确映射  哔哩哔哩忘记密码了怎么找回_哔哩哔哩密码找回方法  Python多线程中正确使用sigwait处理SIGALRM信号  c++如何使用折叠表达式(Fold Expressions)_c++17可变参数模板新技巧  支付宝如何设置安全保护_支付宝安全设置的全面教程  在Go Martini框架中高效服务动态生成图像的实践指南  黑猫投诉统一入口官网 消费者权益保护投诉平台  BetterDiscord插件中安全更新用户简介的实践指南  QQ邮箱官方邮箱登录入口 QQ邮箱网页版快速访问  Yandex官网免登录入口_俄罗斯Yandex搜索引擎一键访问  消息称三星明年 2 月正式发布 HBM4，与 SK 海力士同台竞技  c++如何使用Catch2编写单元测试_c++简洁易用的BDD风格测试框架  Spring Boot嵌入式服务器与J*a EE：功能支持深度解析  抖音DOU+怎么投最有效 抖音付费推广的ROI提升技巧  在J*a中如何开发简易博客标签推荐系统_博客标签推荐项目实战解析  在Socket.IO连接中实现Access Token自动更新与动态重连  C++如何进行游戏物理模拟_使用Box2D库为C++游戏添加2D物理效果  192.168.1.1管理中心入口 192.168.1.1路由器网页设置平台  Win11怎么安装Linux子系统 Win11 WSL2安装Ubuntu及环境配置指南  Golang如何优化内存分配与垃圾回收_Golang内存管理与GC优化实践  优化Django表单：提交验证失败后保留用户输入  Go语言中JSON数据解析与字段访问教程  J*aScript中高效管理与清空动态列表：避免循环陷阱  AO3网页版合集入口 Archive of Our Own同人作品浏览指南  优化MinIO list_objects_v2 操作的性能瓶颈与最佳实践  c++ dfs和bfs代码 c++深度广度优先搜索算法  12306选座系统怎么选连座_12306选座多人连坐操作方法  优化 Jest 模拟：强制未实现函数抛出错误以提升测试效率  Win10快速启动功能利弊分析 Win10开启或关闭快速启动教程【技巧】  Win11怎么修改默认浏览器_Windows 11设置Chrome为默认