纯javascript 下拉按钮菜单插件实现（处理兼容性）

迈不过友情╰ 2022-08-19 14:12 17阅读 0赞

插件分为三部分，html，css，js  
目录结构如下图所示：  
![目录结构][20160119142223343]  
html代码：

css代码：

html, body, h1, h2, h3, h4, h5, ul, li, dl, dt, dd, div, td, th, legend, label, textarea, input, button, select { font: 12px Arial,"宋体",sans-serif; }
    .drop_menu { display: inline-block; position: relative; vertical-align: middle; z-index: 1000; }
    a.cmn_btn { color: #333 !important; display: inline-block; height: 22px; line-height: 22px; padding: 0 12px; vertical-align: middle; }
    a:link { color: #1b609a; text-decoration: none; }
    .cmn_btn { background: #ffffff url("image/btn_bg.png") repeat-x scroll 0 center; border: 1px solid #cccccc; border-collapse: collapse; border-spacing: 0; color: #333333 !important; cursor: pointer; display: inline-block; font-size: 12px; height: 24px; letter-spacing: normal; margin-right: 8px; padding: 2px 12px 3px; vertical-align: middle; word-spacing: normal; }
    .drop_menu .dropdown { background: rgba(0, 0, 0, 0) url("image/dot_down_disabled.gif") no-repeat scroll 0 9px; margin: 0 0 0 5px; padding: 2px 0 0 10px; width: 1px; }
    a.cmn_btn:hover .dropdown, .drop_menu.drop_menu_on .dropdown { background: rgba(0, 0, 0, 0) url("image/dot_down.gif") no-repeat scroll 0 9px; }
    .drop_menu .drop_list { background: #fff none repeat scroll 0 0; border: 1px solid #dddddd; padding: 5px 0; position: absolute; right: 8px; top: 100%; width: 100px; }
    .drop_menu .drop_list a { color: #141414; display: block; height: 24px; line-height: 24px; padding: 0 15px; text-align: left; white-space: nowrap; }
    .drop_menu .drop_list a:hover { background-color: #398ff7; color: #ffffff; }
    
    .drop_menu .drop_line { border-bottom: 1px solid #e5e5e5; display: block; font-size: 0; height: 1px; line-height: 1px; margin: 5px 0; }

到這里布局和样式就完成了 ，下面就是就行js的操作了，操作主要有两个，点击下拉按钮，菜单面板弹出，点击其他地方，菜单页面隐藏。  
先看插件的初始化代码：

LM.DropMenu({ id:'drop_menu',menu:'drop_list',multi:true});

這里面的LM是一个工具对象，里面封装的方法都是兼容浏览器的。  
然后里面定义一个DropMenu的方法进行初始化。  
這里是引用css和js的html代码

最后的演示效果如下：  
![演示效果][20160119143601861]

代码下载地址：  
[http://download.csdn.net/detail/u012316444/9409938][http_download.csdn.net_detail_u012316444_9409938]  
需要的可以去下载，地址打不开在可以在我的资源里面找

下面我来讲解下简单使用  
LM.DropMenu(object);  
其中object只是需要两个参数：id和menu，分别代表点击按钮的id和下拉面板的id。  
multi参数代表是否多个选择，如果设置是，面板会根据你设置的max参数和你面板的a标签的个数自动适应面板。max参数默认为10.  
另外还有个type参数，type参数是一个数组，只包含2个值，代表打开和关闭的事件名称，前者是绑定在按钮上，后者是绑定在document上，缺省默认都为click。

扩展：利用这种插件效果，可以在不改js代码，只修改css和html的情况下，实现各种自己想要的效果

[20160119142223343]: /images/20220731/611da39e390445b395e1e28853228f7f.png
[20160119143601861]: /images/20220731/332aab0f9517466ca0990c8400b24d3f.png
[http_download.csdn.net_detail_u012316444_9409938]: http://download.csdn.net/detail/u012316444/9409938