js多级ul联动
基础概念： JS 多级 UL 联动是指通过 JavaScript 实现多个层级的无序列表（UL）之间的交互关联。当在一个层级的选项改变时，会相应地更新其他层级列表的选项。
优势：
- 提供清晰直观的用户界面，方便用户进行分类选择。
- 增强用户体验，减少用户输入和选择的错误。
类型： 常见的有多级联动菜单、分类筛选等。
应用场景：
- 电商平台的商品分类选择。
- 地区选择，如省、市、区的联动。
- 学校的学院、专业、课程的层级选择。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS 多级 UL 联动示例</title>
</head>
<body>
<ul id="level1">
<li data-value="1">选项 1</li>
<li data-value="2">选项 2</li>
</ul>
<ul id="level2" style="display: none;">
<li data-value="1-1">选项 1-1</li>
<li data-value="1-2">选项 1-2</li>
</ul>
<ul id="level3" style="display: none;">
<li data-value="1-1-1">选项 1-1-1</li>
<li data-value="1-1-2">选项 1-1-2</li>
</ul>
<script>
const level1 = document.getElementById('level1');
const level2 = document.getElementById('level2');
const level3 = document.getElementById('level3');
level1.addEventListener('click', function (event) {
if (event.target.tagName === 'LI') {
const value = event.target.getAttribute('data-value');
if (value === '1') {
level2.style.display = 'block';
level3.style.display = 'none';
} else {
level2.style.display = 'none';
level3.style.display = 'none';
}
}
});
level2.addEventListener('click', function (event) {
if (event.target.tagName === 'LI') {
const value = event.target.getAttribute('data-value');
if (value === '1-1') {
level3.style.display = 'block';
} else {
level3.style.display = 'none';
}
}
});
</script>
</body>
</html>在上述代码中，当点击第一级的选项时，根据不同的值显示或隐藏第二级列表，同理点击第二级列表的选项时控制第三级列表的显示与隐藏。
可能出现的问题及原因：
- 联动逻辑错误：可能是条件判断不正确或者数据值匹配有误。 解决方法：仔细检查条件判断语句和数据值的对应关系。
- 显示与隐藏异常：可能是样式设置错误或者 JavaScript 操作 DOM 的方法不正确。 解决方法：确认样式的设置和 JavaScript 对元素显示隐藏的操作代码。
- 数据更新不及时：可能是事件监听没有正确触发或者数据更新的操作有误。 解决方法：检查事件监听是否正确添加以及数据更新的逻辑。
相关·内容
1回答
我的菜单是基于多级用户界面的。因此，基本上在清单的某些侧面有嵌套的uls
我想知道如何为它创建一个模型/集合。就这一点而言，我将如何处理视图。我见过人们创建带有li标记类型的视图。
浏览 3提问于2012-02-23得票数 0
回答已采纳
3回答
我正在尝试使用backbone.js进行嵌套导航，下面是我的代码。parent_id":2},{"id":10,"name":"five","parent_id":2},Html： <li><a href="#">one<
浏览 3提问于2013-05-07得票数 2
回答已采纳
1回答
dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example <ul<div id="collapse1" class="panel-collapse collapse">
<div class="
浏览 0提问于2017-07-19得票数 0
回答已采纳
2回答
使用节拍转换树结构
、、、、
} } }我想转换成一个嵌套的HTML列表，如下所示： <li>It's raining.</li> <li>A pot of gold was fou
浏览 3提问于2012-01-23得票数 2
2回答
/span> </a>
<ul<li class="divider"></li>
<li><a href="#">Logout</a&g
浏览 0提问于2013-06-29得票数 23
回答已采纳
1回答
我正在尝试使用嵌套无序列表创建多级手风琴。只显示“活动”ul (其他保留隐藏的)时，只有嵌套ul (2222 -> 2.1)。完整代码在这里：$(document).ready(function() {
$('ul</
浏览 6提问于2010-03-03得票数 0
2回答
我在使用jQuery创建多级each()时遇到了问题。这是我的代码，但这被限制在3个级别。我想让它在无限级别下工作。这是一个JsFiddle演示链接：<nav id="navMenu"> <li><a href="#">DEMO</a>
浏览 0提问于2013-04-27得票数 0
回答已采纳
3回答
我试图用JS创建多级纯javascript菜单。BUt它只捕获第一个元素。li.open ul {display: block} <li>1</li> 2 <li>4.1</li>
<li>4.2
浏览 4提问于2019-12-19得票数 2
回答已采纳
3回答
我需要以下方面的帮助：<select id="category" required> <option class="Volvo" value="1">Volvo</option>
<option class="Saab" value="2
浏览 2提问于2018-02-02得票数 1
回答已采纳
1回答
我想知道是否有可能在多级<li>中得到单个<ul>的索引.假设我有以下无序列表： <li>1</li> 2 <li>2.1</li><li>2.2</li> </li>
浏览 0提问于2013-11-07得票数 2
回答已采纳
1回答
我想用typescript实现多级下拉。当我浏览bootstrap css框架时，我没有找到所需的多级下拉列表 ? 如何使用html、css和typescript在angular项目中创建多级下拉列表(我不想使用jQuery) 这是使用bootstrap的单级下拉列表 <div class="dropdown">dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
浏览 6提问于2021-06-21得票数 0
1回答
多级ul列表定位
、、、
我有一个ul列表菜单，有三个层次的深度。我希望所有FirstMenu列表项水平地相邻，而嵌套和垂直对齐的秒和ThirdMenus位于三个水平FirstMenu项之下。<ul id="footermenu"> <ul class="subfootermenu">
浏览 1提问于2012-09-14得票数 1
回答已采纳
我遇到了以下问题:我的PHP页面从db生成导航菜单，就像<ul>菜单一样，然后在JS的帮助下显示它，就像多级菜单一样。问题是，它显示了整个加载过程。
浏览 2提问于2011-09-23得票数 2
回答已采纳
header2 li a{}<ul class="boxs header2"> <a href="/" class="
浏览 2提问于2018-08-10得票数 1
我有一个很大的多级列表，如下所示：li list-style-type: none;<ul> <li>level1 item<ul> <li>level2 item <li>leve
浏览 35提问于2020-02-20得票数 0
回答已采纳
2回答
这是一个多级菜单。当我点击“关于”的链接，它打开子菜单，其中包含三个链接约翰尼，朱莉和杰米。 $(this).find('.sub-nav').toggleClass('visible');#nav ul.sub-nav{} display: blo
浏览 3提问于2015-10-19得票数 2
回答已采纳
4回答
我想用<li>制作2个或更多级别的高标签，但让它们从下到上增长。我有这个 div{ border: 1px solid black; margin: 0px;}
width: 20px;} <div> <li>1</li>
<li>2</
浏览 51提问于2019-11-04得票数 1
回答已采纳
2回答
我将内联动画应用于secondDiv，并每秒清除它，但动画仅在页面加载时显示。我希望它每秒都能显示出来，因此我想先清除它。JSconst hourDiv = document.querySelector("#hours在再次应用内联动画之前，我如何每秒清除它？
浏览 27提问于2020-11-18得票数 0
回答已采纳
1回答
我正在为我的Spring应用程序构建一个导航，我的jsp页面中有一个多级无序列表。我想有一种可能的扩展/折叠的图像点击(也许一点“加号”)。在Spring应用程序中有办法做到这一点吗？这是我最后一次尝试
<%"></script>
<script type="text&
浏览 2提问于2013-10-28得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
