效果图过程最外层盒子设置 flex 属性内部 item 设置默认的宽高展开的 item 设置 flex-grow 属性来填满剩余宽度styletypetext/css.slideBox{display:flex;width:1000px;}.slideBox .sinSlide{width:80px;height:300px;}/* 当前展开的 item */.slideBox .sinSlide.active{flex-grow:1;}/style添加点击事件用于切换当前展开的 itemscript$(document).ready(function(){$(.sinSlide).click(function(){if($(this).hasClass(active)){// 啥都不做}else{$(.slideBox).find(.active).removeClass(active);$(this).addClass(active);}})})/scriptitem 内部添加图片内容利用 img 的 object-fit 属性使图片保持比例填满盒子styletypetext/css.slideBox .sinSlide .imgBox{width:100%;height:100%;}.slideBox .sinSlide .imgBox img{width:100%;height:100%;/* 保持图片比例填满容器 */object-fit:cover;}/style...divclasssinSlidedivclassimgBoximgsrc./images/pic2.pngclasscoverImg/div/divitem 内部添加文字内容item 折叠时宽度较窄只显示标题item 展开时显示标题和描述内容styletypetext/css.slideBox .sinSlide .textBox{width:100%;position:absolute;left:0;bottom:0;height:100%;}.slideBox .sinSlide .textBox .title{font-weight:bold;font-size:18px;}.slideBox .sinSlide .textBox .desc{display:none;font-size:14px;}.slideBox .sinSlide.active .textBox .desc{display:block;}/style...divclasssinSlidedivclassimgBoximgsrc./images/pic2.pngclasscoverImg/divdivclasstextBoxdivclasstitle标题2/divdivclassdesc描述描述描述描述描述描述/div/div/div调整文字内容样式item 折叠时标题居中竖向展示item 展开时标题和描述内容在底部展示item 折叠时展示黑色遮罩遮住全部item 展开时黑色遮罩只在文字部分下方styletypetext/css.slideBox .sinSlide .textBox{width:100%;position:absolute;left:0;bottom:0;/* 渐变色背景透明度 0.7 过渡到 透明度 0.3 */background-image:linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0.3));box-sizing:border-box;/* 默认折叠时居中展示 */height:100%;display:flex;align-items:center;justify-content:center;}.slideBox .sinSlide .textBox .title{/* 文字书写方向竖向从右到左 */writing-mode:vertical-lr;/* 文字转向适应垂直流 */text-orientation:upright;font-weight:bold;font-size:18px;}.slideBox .sinSlide.active .textBox{/* 展开时默认不设置高度渐变背景就不会占全屏 */height:unset;/* 展开时不设置 flex文字不会居中显示 */display:unset;padding:20px;/* 渐变背景由透明度 0.7 过渡到完全透明 */background-image:linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0));}.slideBox .sinSlide.active .textBox .title{/* 展开时文字改为横向书写由上到下 */writing-mode:horizontal-tb;margin-bottom:10px;}/style设置过渡和动画属性.sinSlide 只需要添加 transition 过渡属性来过渡 width 变化即可展开过程中.sinSlide 添加了过渡属性宽度不是瞬时变化会出现 .desc 被折行的情况。为解决这个现象为文字内容添加透明度的变化即在展开足够宽度时再显示文字内容。styletypetext/css.slideBox .sinSlide{width:80px;height:300px;color:#fff;position:relative;/* 改变宽度过渡属性 */transition:all 0.5s ease-in-out;}/* 文字内容设置透明度在 80% 时才显示出来防止出现手风琴展开过程中.desc 内容挤到一起的现象 */keyframesopacity{0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}}.slideBox .sinSlide.active .textBox{animation:opacity 0.5s linear forwards;}/style完整代码styletypetext/css.slideBox{display:flex;width:1000px;}.slideBox .sinSlide{width:80px;height:300px;color:#fff;position:relative;/* 改变宽度过渡属性 */transition:all 0.5s ease-in-out;}.slideBox .sinSlide .imgBox{width:100%;height:100%;}.slideBox .sinSlide .imgBox .coverImg{width:100%;height:100%;/* 保持图片比例填满容器 */object-fit:cover;}.slideBox .sinSlide .textBox{width:100%;position:absolute;left:0;bottom:0;/* 渐变色背景透明度 0.7 过渡到 透明度 0.3 */background-image:linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0.3));box-sizing:border-box;/* 默认折叠时居中展示 */height:100%;display:flex;align-items:center;justify-content:center;}.slideBox .sinSlide .textBox .title{/* 文字书写方向竖向从右到左 */writing-mode:vertical-lr;/* 文字转向适应垂直流 */text-orientation:upright;font-weight:bold;font-size:18px;}.slideBox .sinSlide .textBox .desc{display:none;font-size:14px;}/* 文字内容设置透明度在 80% 时才显示出来防止出现手风琴展开过程中.desc 内容挤到一起的现象 */keyframesopacity{0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}}/* 当前展开的 item */.slideBox .sinSlide.active{flex-grow:1;}.slideBox .sinSlide.active .textBox{/* 展开时默认不设置高度渐变背景就不会占全屏 */height:unset;/* 展开时不设置 flex文字不会居中显示 */display:unset;padding:20px;/* 渐变背景由透明度 0.7 过渡到完全透明 */background-image:linear-gradient(to top,rgba(0,0,0,0.7),rgba(0,0,0,0));animation:opacity 0.5s linear forwards;}.slideBox .sinSlide.active .textBox .title{/* 展开时文字改为横向书写由上到下 */writing-mode:horizontal-tb;margin-bottom:10px;}.slideBox .sinSlide.active .textBox .desc{display:block;}/stylebodydivclassslideBoxdivclasssinSlide activedivclassimgBoximgsrc./images/pic1.pngclasscoverImg/divdivclasstextBoxdivclasstitle标题1/divdivclassdesc描述描述描述描述描述描述/div/div/divdivclasssinSlidedivclassimgBoximgsrc./images/pic2.pngclasscoverImg/divdivclasstextBoxdivclasstitle标题2/divdivclassdesc描述描述描述描述描述描述/div/div/divdivclasssinSlidedivclassimgBoximgsrc./images/pic3.pngclasscoverImg/divdivclasstextBoxdivclasstitle标题3/divdivclassdesc描述描述描述描述描述描述/div/div/divdivclasssinSlidedivclassimgBoximgsrc./images/pic4.pngclasscoverImg/divdivclasstextBoxdivclasstitle标题4/divdivclassdesc描述描述描述描述描述描述/div/div/divdivclasssinSlidedivclassimgBoximgsrc./images/pic5.pngclasscoverImg/divdivclasstextBoxdivclasstitle标题5/divdivclassdesc描述描述描述描述描述描述/div/div/divdivclasssinSlidedivclassimgBoximgsrc./images/pic6.pngclasscoverImg/divdivclasstextBoxdivclasstitle标题6/divdivclassdesc描述描述描述描述描述描述/div/div/divdivclasssinSlidedivclassimgBoximgsrc./images/pic7.pngclasscoverImg/divdivclasstextBoxdivclasstitle标题7/divdivclassdesc描述描述描述描述描述描述/div/div/div/divscript$(document).ready(function(){$(.sinSlide).click(function(){if($(this).hasClass(active)){// 啥都不做}else{$(.slideBox).find(.active).removeClass(active);$(this).addClass(active);}})})/script/body