事件的起因是，之前的一个同事发消息问我，会不会写下拉控件，我说那个挺简单的，不是很麻烦的。 去网上找找前端的比如vue下拉控件啥的呀，但是他告诉我，他的后台管理系统用的是LayUI框架。
唉。。。长叹一口气，算了就帮你找找吧，谁叫我们是同一个槽子的牛马呢！
那么就开始吧！，LayUI虽然现在已经不维护了，但是有的JS还是能在官网上找到的，而且找到以后却和他LayUI的版本不兼容，就导致即使写完了，点击下拉框也是不起作用，控制台报一堆乱七八糟的错！
首先确定版本兼容
可以看到LayUI.js用的是2.2.6版本，真老呀！都不知道牙掉了没！ 
相应的查看这个前端官网可以看到，下拉控件用的是Dropdown,那么我们就去找相应的css和js了。 在网上查了好久才找到的，找的dropdown.js和dropdown.css都是v2.3.5版本的。
(PS:如果谁有需要的话点击这里可以获取，大概率没人用的上了，哈哈 ) [](通过网盘分享的文件：layui下拉dropdown的js和css 链接: pan.baidu.com/s/1L9fGlKej... 提取码: g4vf)
引入和配置
接下来就是在项目中将css和js引入进来，并进行配置了，引入进来以后，可以在LayUI.js中进行如下配置
这样进行配置以后，在你需要使用的页面只引入LayUI.js就行了。
然后在页面引入js就不写了，相关代码直接截图给大家看看
然后就是进行渲染和点击下拉控件的内容让它实现不同页面的跳转了。
这里引用一下子，然后下面就能直接进行使用： 
这里是给按钮带上列表数据的主键id，方便后续进行操作 
然后下面就是js进行判断它是哪种类型的，然后进行不同的操作，使用LayUI的layEvent去判断：
最后，我们看看效果如何：
实战中的坑远不止这些：
- 动态渲染陷阱 ：数据变化后必须
dropdown.reload('id')刷新 - 位置校准 ：在滚动容器内需设置
position: 'absolute' - 样式穿透 ：用
customClass参数覆盖默认样式 - 浏览器兼容：IE 下需额外 polyfill 处理阴影效果
如今看来，其实Layui Dropdown 的设计依然精妙：
尽管现在 Vue/React 组件库大行其道，但在传统 jQuery 项目中，Layui Dropdown 仍是最轻量的解决方案。当我在遗留系统中看到它依然流畅运作时，总会想起那个加班的深夜------好的工具不会被技术潮流淹没，它总在特定场景里默默闪光。感觉好像就是这么个道理！哈哈，今天的分享就到此结束！