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

最新推荐文章于 2023-07-24 10:50:41 发布

ftytotop

最新推荐文章于 2023-07-24 10:50:41 发布

阅读量1.4k

点赞数

分类专栏： javascript 文章标签： javascript 插件下拉菜单

本文链接：https://blog.youkuaiyun.com/yuantingfei/article/details/50542573

版权

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个简单的下拉菜单插件实现方法，包括HTML结构、CSS样式和JavaScript交互逻辑。通过LM.DropMenu方法初始化插件，支持多选及自定义事件绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

插件分为三部分，html，css，js
目录结构如下图所示：

html代码：

<body>
       <div class="drop_menu">
           <a href="javascript:void(0)" class="cmn_btn" id="drop_menu">操作
               <span class="dropdown"></span>
           </a>
           <div class="drop_list" id="drop_list" style="display:none; width:80px;">
                  <a href="#">新增</a>
                  <a href="##">编辑</a>
                  <a href="##" >删除</a>
                  <b class="drop_line"></b>
                  <a href="##" >禁用</a>
                  <a href="##" >启用</a>
                  <a href="##" >卸载程序</a>
           </div>
        </div> 
</body>

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代码

<link href="../css/ytf-drop_menu-demo.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../js/LM.js"></script>
<script type="text/javascript" src="../js/DropMenu.js"></script>

最后的演示效果如下：

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

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

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