大家好，今天小编来为大家解答《原创》简单滑动栏（Jquery版和纯CSS版）这个问题，很多人还不知道，现在让我们一起来看看吧！
脚本
$(文档).ready(函数(){
$(‘菜单ul’).hide();
$(‘菜单导航’).click(function(){
var index=$(‘菜单导航’).index(this);
$(‘菜单ul:eq(‘+index+’)’).slideToggle();
});
})
/脚本
风格
*{margin:0;padding:0;list-style:none;}
.mymenu{字体大小： 2em;行高： 2em;cursor:指针；}
.mymenu nav{width: 100%;background: #fff000;}
.mymenu ul li{width: 100%;background: #f4f4f4;过渡： 1s;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;}
.mymenu ul li:hover{background: #ccc;}
/风格
菜单类=’mymenu’
nav 第一级栏1/nav
乌尔
li二级柱1/li
li二级柱2/li
li二级柱3/li
li二级柱4/li
/ul
nav 第一级栏2/nav
乌尔
里二级柱5/里
li二级柱6/li
里二级柱7/里
里二级柱8/里
里二级柱7/里
里二级柱8/里
/ul
nav 第一级栏3/nav
乌尔
里二级柱53/里
里二级柱63/里
里二级柱73/里
里二级柱83/里
/ul
/菜单
2.纯CSS版本
风格
*{padding:0;margin:0;}
html,正文{font-size:1em;}
.mymenu{字体大小：2em;行高：2em;列表样式：none;光标：指针；}
.mymenu li{width:100%;background:#fff000;outline:none;}
.mymenu li nav{height:0;width:100%;transition:1s;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;}
.mymenu li nav li{display:none;width:100%;background:#f4f4f4;transition:1s;-webkit-transition:1s;-moz-transition:1s;-o-transition:1s;}
.mymenu li:焦点导航{height:8em;}
.mymenu li:focus nav li{display: 块；}
.mymenu li:焦点导航li:hover{background: #ccc;}
/风格
菜单类=’mymenu’
li tabindex=’1’第一级列1
导航
li二级柱1/li
li二级柱2/li
li二级柱3/li
li二级柱4/li
/导航
/里
li tabindex=’2’第一级列2
导航
里二级柱5/里
li二级柱6/li
里二级柱7/里
里二级柱8/里
/导航
/里
li tabindex=’3’第一级列3
导航
里二级柱53/里
里二级柱63/里
里二级柱73/里
里二级柱83/里
/导航
/里
原创文章，作者：小su，如若转载，请注明出处：https://www.sudun.com/ask/114915.html
用户评论
泪湿青衫
终于找到一个简单的JS实现滑动栏的方案！之前一直用Swiper,复杂程度太高了。这个jQuery版的代码非常简洁，关键的地方都注释得很详细，学习起来很容易。 感觉纯CSS的版本也蛮不错的，未来可以用用看效果怎么样。
有14位网友表示赞同！
毒舌妖后
我尝试了一下这款jQuery版本，效果相当赞！特别是我喜欢的分页指示器，操作流畅，UI也很美观。 我在一些页面效果上需要调整速度和动画效果，看起来这个插件提供了足够的选项来达成我的目的。 期待继续学习它的用法!
有18位网友表示赞同！
隔壁阿不都
CSS实现的滑动栏还是有些鸡肋啊，体验感觉不太好 Compared to the JavaScript version, it feels clunky and lacks smooth transitions. But I appreciate the effort put into making it accessible for those who want a purely CSS solution.
有5位网友表示赞同！
尘埃落定
这个标题说的“简易”一点夸大了！虽然插件代码都写明白了，但要理解每个函数的逻辑还是需要一定的时间。 我感觉更适合一些熟悉JavaScript的人来使用吧。纯CSS版的难度似乎更高了一点……
有12位网友表示赞同！
喜欢梅西
看到这个 “简易滑动栏目”，忍不住点进来试一试！jQuery版确实很方便快速实现，而且效果还可以。但如果想进一步定制动画和响应式设计的话，可能还得借助一些其他的工具或库来配合使用吧？期待作者后期能提供更多丰富的功能。
有17位网友表示赞同！
夏至离别
之前用过很多复杂的滑动栏插件，感觉这个 “简易滑动栏目” 还挺清新的！jQuery版很适合快速原型开发，纯CSS版的可读性很高，可以了解一下实现原理。 不过不知道能否支持多个滑块？这对我来说还挺重要。
有10位网友表示赞同！
你很爱吃凉皮
这篇博文的标题太吸引人了！我一直想学习如何自己创建滑动栏，这个 "简易滑动栏目" 正好合我需求！ 看下 jQuery 版本的代码，感觉可以很快上手，纯CSS的是个挑战，先慢慢研究一下吧！
有13位网友表示赞同！
柠夏初开
做简单的网页滚动展示效果很容易了，这 "简易滑动栏目" 我看不太懂有什么技术含量嘛。 但是分享这种简单解决方案确实挺好的，可以方便一些入门者学习jQuery和 CSS。
有12位网友表示赞同！
千城暮雪
这个“简易滑动栏目”，有点太粗略了，没有讲解到更深层的原理和自定义功能。 想要深入了解，可能还要自己额外去探索。 如果能提供更多详细的教程和案例，那就更棒了！
有15位网友表示赞同！
空谷幽兰
我用jQuery版的 "简易滑动栏目" 在我的博客中使用，效果很好！ 虽然简单，但足够满足我的需求。纯CSS版本我没有尝试过，也许有机会学习一下。 感谢作者分享如此实用的代码!
有11位网友表示赞同！
苏莫晨
标题说的 “简易” 还真的太合适了，这个“简易滑动栏目” 很容易看懂并直接上手使用。jQuery版只需要几行代码就能实现基本的效果，非常方便快捷！ 这对我来说简直是福音啊！
有8位网友表示赞同！
神经兮兮°
我平时很少碰 jQuery，这次来尝试一下 "简易滑动栏目" ，发现其实并不复杂，很符合初学者入门学习的难度。希望作者能提供更多类似项目实战案例，帮助大家更好地掌握 jQuery 的使用方法。
有9位网友表示赞同！
矜暮
这个 “简易滑动栏目”，实现原理太基础了，对于我这种有一定开发经验的人来说并没有太大意义。 不过可能对一些刚接触网页开发的新手会有用吧？ 希望作者能够提供更复杂的功能和更高级的解决方案。
有20位网友表示赞同！
君临臣
看完这个 "简易滑动栏目" ，我很感动！因为很多入门学习者的需求都被满足了，即使是简单的代码，也能帮助大家开始学习编程。 希望更多开发者能像作者一样，分享自己的经验和知识，让每个人都能轻松学习到新技能！
有11位网友表示赞同！
素颜倾城
我对这款“简易滑动栏目” 的纯CSS实现印象深刻。 这种方法虽然比JavaScript版本复杂一点，但也更利于理解 CSS 的工作原理，并且在没有额外依赖的情况下可以实现功能，非常高效！
有16位网友表示赞同！