本文实例讲述了Jquery实现仿京东商城省市联动菜单的简单实例代码。分享给大家供大家参考。具体如下：
运行效果截图如下：
具体代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom-theme/jquery-ui-1.10.0.custom.css">
<
【jQuery 实现仿京东商城省市联动菜单】
在网页开发中，联动菜单是一种常见的交互设计，特别是在电子商务网站上，用户在填写收货地址时通常需要选择省份和城市。本实例将教你如何使用jQuery来创建一个类似京东商城的省市联动菜单。
让我们分析一下实例中的关键代码：
1. **HTML 结构**：
- 创建一个`<input>`标签用于触发联动菜单显示。
- 使用`<div id="addressInfo">`包含联动菜单的内容，其中包括一个省份选择的`<div class="selectAddress area">`，并使用`<ul>`展示省份选项。
- 利用`<ul>`和`<li>`标签以及`<a>`标签来创建可点击的省份链接。
2. **CSS 样式**：
- 使用CSS为菜单项设置样式，如浮动、宽度、列表样式、行高和鼠标悬停效果，以提供良好的用户体验。
3. **JavaScript/jQuery 部分**：
- 加载jQuery库和jQuery UI库，这两个库是实现功能的核心。
- 初始化省份数组、城市数组和县区数组，这些数组包含了可供选择的省市县名称。
- 当用户聚焦到输入框(`.address`)时，显示联动菜单。
- 使用`.bind('focus')`事件监听输入框的聚焦状态，当聚焦时，计算菜单的定位并显示。
- 使用`$.each()`遍历省份数组，动态创建并添加省份的`<li>`元素。
- 使用jQuery UI的`.tabs()`方法创建带有选项卡效果的省份选择器。
- 添加事件监听器，当点击省份链接时，动态生成对应城市的选项卡。
4. **事件处理**：
- 当点击省份链接时，通过`$(this).text()`获取选中的省份名称，然后遍历城市数组，生成对应的`<li>`元素和`<input type="hidden">`，以保存用户的选择。
- 新建的选项卡内容被插入到对应的`<div id="tabs-2">`中，从而实现“联动”效果，即选择省份后自动显示对应的城市列表。
5. **优化和扩展**：
- 示例中的城市数据是硬编码的，实际应用中应从服务器获取动态数据，可以通过Ajax请求实现。
- 可以增加对县区的联动，当城市被选中后，显示相应的县区列表。
- 考虑到无障碍性（Accessibility），确保菜单结构符合WCAG标准，如添加合适的ARIA属性。
通过这个实例，我们可以学习到如何使用jQuery和jQuery UI库来创建交互式的下拉菜单，并理解如何处理DOM操作、事件监听以及动态生成内容。这对于提升网页的用户体验和功能完整性具有重要意义。同时，这也为我们提供了如何结合CSS、HTML和JavaScript来实现复杂功能的一个范例。在实际项目中，可以根据需求进行调整和扩展，以适应各种场景。
