问题：
前端 - Jquery完成一个多层的进度条，如何实现？
沈华晖
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="stepsBox">
<ul class="list-unstyled">
<li class="stepBar alert alert-light">
<div class="stepTitle">步骤一</div>
<div class="stepContent">
<ol>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">1.1 标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">1.2 标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">1.3标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
</ol>
</div>
</li>
<li class="stepBar alert alert-secondary">
<div class="stepTitle">步骤二</div>
<div class="stepContent">
<ol>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">2.1标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">2.1标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
</ol>
</div>
</li>
<li class="stepBar alert alert-secondary">
<div class="stepTitle">步骤三</div>
<div class="stepContent">
<ol>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">3.1标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">3.2标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">3.3标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
<li>
<div class="row">
<div class="col-md-8 text-left">
<div class="stepContentTitle">3.4标题</div>
</div>
<div class="col-md-4 text-right">
<div class="stepFinishTime">
2024年8月1日 13:17:00
</div>
</div>
</div>
<div class="stepContentText">
Lorem
</div>
</li>
</ol>
</div>
</li>
</ul>
<div class="btnBox d-flex justify-content-between">
<button
type="button"
class="btn btn-secondary previousBtn"
disabled
>
上一步
</button>
<button type="button" class="btn btn-primary nextBtn">
下一步
</button>
</div>
<div class="progressBar"></div>
</div>$(document).ready(function () {
$('.stepsBox .stepBar').eq(0).find('.stepContent > ol > li').eq(0).addClass('activeBox');
$('.nextBtn').on('click', function () {
var currentStep = $('.stepsBox .stepBar').find('.activeBox');
var nextStep = currentStep.next();
if (nextStep.length) {
$('.stepsBox .stepContent ol li').each(function () {
$(this).removeClass('activeBox');
});
debugger
nextStep.addClass('activeBox');
var currentStepBar = currentStep.closest('.stepBar');
var nextStepBar = currentStepBar.next('.stepBar');
var currentStepIndex = currentStep.index();
var nextStepBarLength = nextStepBar.find('.stepContent > ol > li').length;
if (currentStepIndex === nextStepBarLength - 1 && nextStepBar.length) {
currentStepBar.removeClass('alert-light').addClass('alert-secondary');
nextStepBar.removeClass('alert-secondary').addClass('alert-light');
nextStepBar.find('.stepContent > ol > li').eq(0).addClass('activeBox');
if (!nextStepBar.next('.stepBar').length) {
$(this).removeClass('btn-primary').addClass('btn-secondary').attr('disabled', 'disabled');
}
}
} else {
$(this).removeClass('btn-primary').addClass('btn-secondary').attr('disabled', 'disabled');
}
});
});
默认给第一个stepBar添加activeBox，点击下一步li增加CSS activeBox，移除上一个；
如果下一个stepBar增加CSS alert alert-light，移除上一个并增加CSS alert alert-secondary；
如果是最后一个li 点击下一步Btn 增加btn-secondary disabled,上一步同理。
写了一半，越来越乱，求点思路，谢谢。
共有1个答案
拓拔德馨
要实现一个多层的进度条，并结合你当前的HTML结构和jQuery代码，我们可以进行一些修改和添加。以下是一个简化和完善的示例，包括进度条的实现和按钮逻辑的完善。
HTML 结构（保持不变）
你的HTML结构已经很好地支持了多层步骤和子步骤的展示，这里我们主要关注进度条的实现和按钮逻辑的完善。
CSS 添加（可选）
为了更清晰地展示进度条，我们可以添加一些简单的CSS。这里我们使用了一个简单的进度条样式，你可以根据需要进行调整。
.progressBar {
height: 20px;
background-color: #ddd;
margin-top: 20px;
}
.progressBar .progress {
height: 100%;
background-color: #4CAF50;
width: 0%; /* 初始宽度为0% */
transition: width 0.4s ease-in-out;
}jQuery 代码修改
我们需要更新jQuery代码，以便在点击下一步时更新进度条，并处理上一步的逻辑。
$(document).ready(function () {
var activeStep = 0; // 当前活动的步骤索引
var totalSteps = $('.stepsBox .stepBar').length; // 总步骤数
var progressBar = $('.progressBar').append('<div class="progress"></div>'); // 创建进度条
// 初始化第一个步骤为活动状态
$('.stepsBox .stepBar').eq(activeStep).addClass('activeStep');
$('.stepsBox .stepBar .stepContent > ol > li').eq(0).addClass('activeBox');
// 更新进度条
function updateProgressBar() {
var progressWidth = (activeStep + 1) / totalSteps * 100;
$('.progressBar .progress').css('width', progressWidth + '%');
}
// 点击下一步
$('.nextBtn').on('click', function () {
var currentStepBar = $('.stepsBox .stepBar').eq(activeStep);
var currentActiveLi = currentStepBar.find('.activeBox');
var nextLi = currentActiveLi.next();
if (nextLi.length) {
currentActiveLi.removeClass('activeBox');
nextLi.addClass('activeBox');
} else {
// 当前步骤的所有子步骤已完成，移动到下一个步骤
activeStep++;
$('.stepsBox .stepBar').removeClass('activeStep').eq(activeStep).addClass('activeStep');
$('.stepsBox .stepBar .stepContent > ol > li').eq(0).addClass('activeBox');
// 切换步骤条的颜色
$('.stepsBox .stepBar').eq(activeStep - 1).removeClass('alert-light').addClass('alert-secondary');
$('.stepsBox .stepBar').eq(activeStep).removeClass('alert-secondary').addClass('alert-light');
// 检查是否到达最后一个步骤
if (activeStep === totalSteps - 1) {
$(this).prop('disabled', true).removeClass('btn-primary').addClass('btn-secondary');
}
// 更新进度条
updateProgressBar();
}
});
// 点击上一步（可选实现）
$('.previousBtn').on('click', function () {
if (activeStep > 0) {
activeStep--;
$('.stepsBox .stepBar').removeClass('activeStep').eq(activeStep).addClass('activeStep');
// 激活上一步骤的最后一个完成的子步骤（这里简化处理，总是回到第一个子步骤）
$('.stepsBox .stepBar').eq(activeStep).find('.stepContent > ol > li').eq(0).addClass('activeBox');
// 切换步骤条的颜色
$('.stepsBox .stepBar').eq(activeStep + 1).removeClass('alert-light').addClass('alert-secondary');
$('.stepsBox .stepBar').eq(activeStep).removeClass('alert-secondary').addClass('alert-light');
// 启用下一步按钮
$('.nextBtn').prop('disabled', false).removeClass('btn-secondary').addClass('btn-primary');
// 更新进度条
updateProgressBar();
}
});
// 初始进度条
updateProgressBar();
});这段代码包括了进度条的初始化、更新，以及上下一步按钮的逻辑处理。你可以根据自己的需求调整样式和行为。
类似资料：
-
实现下图效果 要求 实际分数和刻度对应 350-550[2色渐变]；550-600[3色渐变]；600-650[4色渐变]；650-700[5色渐变]；700以上[6色渐变] 渐变起始位置为刻度表起始位置，终点位置为分数终点 其他简单的要求，比如字体颜色渐变啥的，就不列出来了 分析与思考 上面那些要求，是我拿到图后分解后的几个要求，由于分数是动态的，因此这里肯定不能直接丢个png上去，考虑了svg
-
显示一个确定的或不确定的进程状态。 如需了解更多有关 progressbar 部件的细节，请查看 API 文档 进度条部件（Progressbar Widget）。 默认功能 默认的确定的进度条。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 进度条（Progressbar）
-
本文向大家介绍jQuery实现页面顶部显示的进度条效果完整实例，包括了jQuery实现页面顶部显示的进度条效果完整实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现页面顶部显示的进度条效果。分享给大家供大家参考，具体如下： 具体代码如下： 完整实例代码点击此处本站下载。 希望本文所述对大家jQuery程序设计有所帮助。
-
您好，我只想实现一个循环进度动画，直到图像从滑翔加载，但在占位符中实现动画后，它会将动画提供给每个单独的图像，并且图像会更改为占位符图像大小，这是我不想要的 我希望只有一个圆形进度动画在布局的中心，直到图像加载在回收器视图中 Post\u Item\u Container.xml Fragment\u Search.xml Search_Fragment.java
-
本文向大家介绍js实现定时进度条完成后切换图片，包括了js实现定时进度条完成后切换图片的使用技巧和注意事项，需要的朋友参考一下 定时进度条，进度100%以后可以切换图片等。 setInterval() 和setTimeout() 两个方法都可以实现。 源码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍请实现一个文章阅读的进度条相关面试题，主要包含被问及请实现一个文章阅读的进度条时的应答技巧和注意事项，需要的朋友参考一下 chrome 浏览器中，通过document.documentElement.scrollTop获取页面滚过高度，通过document.documentElement.scrollHeight获取页面总高度，通过document.documentElement.c