layui dropdown实现多种下拉菜单效果代码-html代码-BFW代码库

代码语言：html
代码描述：layui dropdown实现多种下拉菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>
    <style>
        ol,ul {
            padding-left: 35px;
        }
        ol li, ul li {
            list-style-position: inside;
            list-style-type: unset;
        }
        body {
            padding: 20px;
        }
        h1 {
            margin: 24px 0 12px;
        }
        p {
            margin: 23px 10px 6px 10px;
            font-size: 17px;
            line-height: 23px;
        }
        .bold {
            font-weight: bold;
        }
        .m-inline {
            display: inline-block;
        }
    </style>
    <link rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/modules/dropdown.css">
    <script>
        window.dropdown_useOwnCss = true;
    </script>
</head>
<body>
<div>

    <h1>一、在线体验</h1>
    <p class="bold">1、基本效果：</p>
    <p>
        <div class="m-inline"><button class="layui-btn layui-btn-sm" lay-filter="test0" id="xxxxx">
            <span>下拉菜单</span>
            <i class="layui-icon layui-icon-triangle-d" style="display: inline-block"></i>
        </button></div>、
    <div class="m-inline"><button class="layui-btn layui-btn-sm" lay-filter="test1"
                lay-dropdown="{align:'left', menus: [{layIcon:'layui-icon-username',txt: '个人中心', event:'usercenter'}, {layIcon: 'layui-icon-set',txt: '设置', event:'set'}, {layIcon: 'layui-icon-logout', txt: '退出登录', event:'loginout'}]}">
            <span>左对齐</span>
            <i class="layui-icon layui-icon-triangle-d"></i>
        </button></div>、
    <div class="m-inline"><button class="layui-btn layui-btn-sm" lay-filter="test2"
                lay-dropdown="{align:'center', menus: [{layIcon:'layui-icon-username',txt: '个人中心', event:'usercenter'}, {layIcon: 'layui-icon-set',txt: '设置', event:'set'}, {layIcon: 'layui-icon-logout', txt: '退出登录', event:'loginout'}]}">
            <span>中对齐</span>
            <i class="layui-icon layui-icon-triangle-d"></i>
        </button></div>、
    <div class="m-inline"><button class="layui-btn layui-btn-sm" lay-filter="test3"
                lay-dropdown="{align:'right', menus: [{layIcon:'layui-icon-username',txt: '个人中心', event:'usercenter'}, {layIcon: 'layui-icon-set',txt: '设置', event:'set'}, {layIcon: 'layui-icon-logout', txt: '退出登录', event:'loginout'}]}">
            <span>右对齐</span>
            <i class="layui-icon layui-icon-triangle-d"></i>
        </button></div>、
    <div class="m-inline"><button class="layui-btn layui-btn-sm" lay-filter="test4"
                lay-dropdown="{menus: [{layIcon:'layui-icon-username',txt: '个人中心', event:'usercenter'}, {layIcon: 'layui-icon-set',txt: '设置', event:'set'}, 'hr',{layIcon: 'layui-icon-logout', txt: '退出登录', event:'loginout'}]}">
            <span>菜单分割线</span>
            <i class="layui-icon layui-icon-triangle-d"></i>
        </button></div>、
    <div class="m-inline"><button class="layui-btn layui-btn-sm" lay-filter="test5"
                lay-dropdown="{menus: [{header: '用户'},{layIcon:'layui-icon-username',txt: '个人中心', event:'usercenter'}, {layIcon: 'layui-icon-set',txt: '信息设置', event:'set'}, {header: '操作',align:'center'},{layIcon: 'layui-icon-praise', txt: '点赞加油', event:'praise'},{layIcon: 'layui-icon-logout', txt: '退出登录', event:'loginout'},{header: '其他',align:'right'},{layIcon: 'layui-icon-tips', txt: '关于网站', event:'about'}]}">
            <span>带header的下拉菜单</span>
            <i class="layui-icon layui-icon-triangle-d"></i>
        </button></div>、
    <div class="m-inline"><button class="layui-btn layui-btn-sm" lay-filter="test6"
                lay-dropdown="{menus: [{header: '用户', withLine: true},{layIcon:'layui-icon-username',txt: '个人中心', event:'usercenter'}, {layIcon: 'layui-icon-set',txt: '设置', event:'set'}, {header: '操作', withLine: true},{layIcon: 'layui-icon-logout', txt: '退出登录', event:'loginout'}]}">
            <span>带header的下拉菜单2</span>
            <i class="layui-icon layui-icon-triangle-d"></i>
        </button></div>
    </p>
    <p class="bold">2、固定菜单头</p>
    <p>
    <div class="m-inline"><button class="layui-btn layui-btn-sm" lay-filter="test_f_1" lay-dropdown="{templateMenu: 'test_f_1_template', maxHeight: 220}">
        <span>固定菜单头示例1</span>
        <i class="layui-icon layui-icon-triangle-d"></i>
    </button></div>、
    <div class="m-inline"><button class="layui-btn layui-btn-sm" lay-filter="test_f_2" lay-dropdown="{templateMenu: 'test_f_2_template', maxHeight: 220}">
        <span>固定菜单头示例2</span>
        <i class="layui-icon layui-icon-triangle-d"></i>
    </button></div>、
    </p>
    <p class="bold">3、Hover触发：</p>
    <p>
        <button class="layui-btn layui-btn-sm" lay-filter="test7"
                lay-dropdown="{showBy: 'hover',align:'left', menus: [{layIcon:'layui-icon-username',txt: '个人中心', event:'usercenter'}, {layIcon: 'layui-icon-set',txt: '设置', event:'set'}, {layIcon: 'layui-icon-logout', txt: '退出登录', event:'loginout'}]}">
            <span>hover触发下拉菜单</span>
            <i class="layui-icon layui-icon-triangle-d"></i>
        </button>
    </p>
    <p class="bold">4、自定义下拉内容：</p>
    <p>
    <div class="m-inline"><button class="layui-btn layui-btn-sm" lay-filter="test8">
            <span>下拉自定义内容</span>
            <i class="layui-icon layui-icon-triangle-d"></i>
        </button></div>、
    <div class="m-inline"><button class="layui-btn layui-btn-sm" lay-filter="test9" lay-dropdown="{template: '#myimg'}">
            <span>下拉显示图片</span>
            <i class="layui-icon layui-icon-triangle-d"></i>
        </button></div>
    </p>
    <p class="bold">5、任意下拉触发器：</p>
    <p>
        <small>点击这个小图片弹出下拉:</small><img style="width: 20px;height: 20px;background-color: #ff6619;border-radius: 50%"
                                        src="https://file.microanswer.cn/microanswer_head.png"
                                        lay-filter="test10"
                                        lay-dropdown="{align:'left', menus: [{layIcon:'layui-icon-username',txt: '个人中心', event:'usercenter'}, {layIcon: 'layui-icon-set',txt: '设置', event:'set'}, {layIcon: 'layui-icon-logout', txt: '退出登录', event:'loginout'}]}">
    </p>
    <br>
    <p class="bold">6、多列菜单</p>
    <p>
    <div class="m-inline"><button class="layui-btn layui-btn-sm" lay-filter="test_m_1" lay-dropdown="{templateMenu: 'test_m_1_template', templateMenuSptor:'()'}">
        <span>双列下拉菜单</span>
        <i class="layui-icon layui-icon-triangle-d"></i>
    </button></div>、
    <div class="m-inline"><button class="layui-btn layui-btn-sm" lay-filter="test_m_2" lay-dropdown="{templateMenu: 'test_m_2_template', menuSplitor: false}">
        <span>三列下拉菜单</span>
        <i class="layui-icon layui-icon-triangle-d"></i>
    </button></div>、
    <div class="m-inline"><button class="layui-btn layui-btn-sm" lay-filter="test_m_3" lay-dropdown="{templateMenu: 'test_m_3_template'}">
        <span>四列下拉菜单</span>
        <i class="layui-icon layui-icon-triangle-d"></i>
    </button></div>、
    <div class="m-inline"><button class="layui-btn layui-btn-sm" lay-filter="test_m_4" lay-dropdown="{templateMenu: 'test_m_4_template'}">
        <span>十列下拉菜单</span>
        <i class="layui-icon layui-icon-triangle-d"></i>
    </button></div>
    </p>
    <p class="bold">7、在表格里使用：</p>
    <p>
    <table id="mytable" lay-filter="table1"></table>
    </p>
    <p class="bold">8、在表格里使用，并支持表格数据操作：</p>
    <p>
    <table id="mytable2" lay-filter="table2"></table>
    </p>
    <p class="bold">9、手动显示与隐藏(v2.0.1)：</p>
    <p>
        <button class="layui-btn layui-btn-sm layui-btn-primary" title="此按钮已被置为disabled，使用右侧按钮操作" disabled lay-filter="test_man">手动显示隐藏到这儿</button>
        <button class="layui-btn layui-btn-sm test_man_show">显示</button><span></span>
        <button class="layui-btn layui-btn-sm layui-btn-normal  test_man_hide">隐藏</button><span></span>
        <button class="layui-btn layui-btn-sm layui-btn-warm test_man_destroy">销毁</button><span></span>
    </p>



</div>

<!-- 固定菜单头示例1 -->
<script id="test_f_1_template" type="text/plain">

  [
    [{header: "左对齐", fixed: true, align: "left"}]
    [{txt: "个人中心1", event: "usercenter"}]
    [{txt: "头像设置", event: "sethead"}]
    [{txt: "我的礼包", event: "wdlb"}]
    [{txt: "我的好友", event: "wdhy"}]
    [{txt: "我的积分", event: "wdjf"}]
    [{txt: "账号充值", event: "zhcz"}]
    [{txt: "注销账号", event: "desctroy"}]
  ]

  [
    [{header: "后台", fixed: true, align: "left"}]
    [{txt: "赠送红包", event: "redp"}]
    [{txt: "缴费通知", event: "qftt"}]
    [{txt: "强制下线", event: "offline"}]
    [{txt: "注销账户", event: "desctroy"}]
    [{txt: "提升权限", event: "tsqx"}]
    [{txt: "卸载权限", event: "xzqx"}]
    [{txt: "分配任务", event: "fprw"}]
    [{txt: "增加人手", event: "zjrs"}]
    [{txt: "限制浏览", event: "xzll"}]
  ]

</script>


<!-- 固定菜单头示例2 -->
<script id="test_f_2_template" type="text/plain">

  [
    [{header: "右对齐", fixed: true, align: "right"}]
    [{txt: "个人中心1", event: "usercenter"}]
    [{txt: "头像设置", event: "sethead"}]
    [{txt: "我的礼包", event: "wdlb"}]
    [{txt: "我的好友", event: "wdhy"}]
    [{txt: "我的积分", event: "wdjf"}]
    [{txt: "账号充值", event: "zhcz"}]
    [{txt: "注销账号", event: "desctroy"}]
  ]

  [
    [{header: "右对齐", fixed: true, align: "right"}]
    [{txt: "赠送红包", event: "redp"}]
    [{txt: "缴费通知", event: "qftt"}]
    [{txt: "强制下线", event: "offline"}]
    [{txt: "注销账户", event: "desctroy"}]
    [{txt: "提升权限", event: "tsqx"}]
    [{txt: "卸载权限", event: "xzqx"}]
    [{txt: "分配任务", event: "fprw"}]
    [{txt: "增加人手", event: "zjrs"}]
    [{txt: "限制浏览", event: "xzll"}]
  ]

</script>

<!-- 双列下拉 菜单配置模板 -->
<script id="test_m_1_template" type="text/plain">

  (
    ({header: "菜单1", fixed: true, align: "center"})
    ({txt: "个人中心1", event: "usercenter"})
    ({txt: "头像设置", event: "sethead"})
    ({txt: "注销账号", event: "desctroy"})
  )

  (
    ({header: "菜单2", fixed: true, align: "center"})
    ({txt: "赠送红包", event: "redp"})
    ({txt: "缴费通知", event: "qftt"})
    ({txt: "强制下线", event: "offline"})
  )

</script>

<!-- 三列下拉按钮 菜单配置模板 -->
<script id="test_m_2_template" type="text/plain">

  [
    [{header: "通用功能", fixed: true}]
    [{txt: "个人中心", event: "usercenter"}]
    [{txt: "头像设置", event: "sethead"}]
    [{txt: "注销账号", event: "desctroy"}]
    [{txt: "赠送红包", event: "redp"}]
    [{txt: "缴费通知", event: "qftt"}]
    [{txt: "强制下线", event: "offline"}]
  ]

  [
    [{header: "账号管理", fixed: true}]
    [{txt: "添加好友", event: "addff"}]
    [{txt: "赠送key码", event: "zskm"}]
    [{txt: "账号升级", event: "upad"}]
  ]


  [
    [{header: "高危操作", fixed: true}]
    [{txt: "添加对象", event: "addfdf"}]
    [{txt: "移除对象", event: "rbdd"}]
    [{txt: "账号详情", event: "detaa"}]
  ]

</script>

<!-- 四列下拉按钮 菜单配置模板 -->
<script id="test_m_3_template" type="text/plain">

  [
    [{txt: "个人中心", event: "usercenter"}]
    [{txt: "头像设置", event: "sethead"}]
    [{txt: "注销账号", event: "desctroy"}]
  ]

  [
    [{txt: "赠送红包", event: "redp"}]
    [{txt: "缴费通知", event: "qftt"}]
    [{txt: "强制下线", event: "offline"}]
  ]


  [
    [{txt: "添加好友", event: "addff"}]
    [{txt: "赠送key码", event: "zskm"}]
    [{txt: "账号升级", event: "upad"}]
  ]


  [
    [{txt: "添加对象", event: "addfdf"}]
    [{txt: "移除对象", event: "rbdd"}]
    [{txt: "账号详情", event: "detaa"}]
  ]

</script>


<!-- 十列下拉按钮 菜单配置模板 -->
<script id="test_m_4_template" type="text/plain">

  [
    [{txt: "第1列", event: "l1"}]
    [{txt: "个人中心", event: "usercenter"}]
    [{txt: "头像设置", event: "sethead"}]
    [{txt: "注销账号", event: "desctroy"}]
  ]

  [
    [{txt: "第2列", event: "l2"}]
    [{txt: "赠送红包", event: "redp"}]
    [{txt: "缴费通知", event: "qftt"}]
    [{txt: "强制下线", event: "offline"}]
  ]


  [
    [{txt: "第3列", event: "l3"}]
    [{txt: "添加好友", event: "addff"}]
    [{txt: "赠送key码", event: "zskm"}]
    [{txt: "账号升级", event: "upad"}]
  ]


  [
    [{txt: "第4列", event: "l4"}]
    [{txt: "添加对象", event: "addfdf"}]
    [{txt: "移除对象", event: "rbdd"}]
    [{txt: "账号详情", event: "detaa"}]
  ]
  [
    [{txt: "第5列", event: "l5"}]
    [{txt: "个人中心", event: "usercenter"}]
    [{txt: "头像设置", event: "sethead"}]
    [{txt: "注销账号", event: "desctroy"}]
  ]

  [
    [{txt: "第6列", event: "l6"}]
    [{txt: "赠送红包", event: "redp"}]
    [{txt: "缴费通知", event: "qftt"}]
    [{txt: "强制下线", event: "offline"}]
  ]


  [
    [{txt: "第7列", event: "l7"}]
    [{txt: "添加好友", event: "addff"}]
    [{txt: "赠送key码", event: "zskm"}]
    [{txt: "账号升级", event: "upad"}]
  ]


  [
    [{txt: "第8列", event: "l8"}]
    [{txt: "添加对象", event: "addfdf"}]
    [{txt: "移除对象", event: "rbdd"}]
    [{txt: "账号详情", event: "detaa"}]
  ]

   [
    [{txt: "第9列", event: "l9"}]
    [{txt: "个人中心", event: "usercenter"}]
    [{txt: "头像设置", event: "sethead"}]
    [{txt: "注销账号", event: "desctroy"}]
  ]

  [
    [{txt: "第10列", event: "l10"}]
    [{txt: "赠送红包", event: "redp"}]
    [{txt: "缴费通知", event: "qftt"}]
    [{txt: "强制下线", event: "offline"}]
  ]
</script>
<!-- 自定义下拉菜单内容 -->
<script id="mymenu" type="text/html">
    <div style="padding: 20px;max-width: 300px;display: flex;display: -webkit-flex">
        <img src="https://file.microanswer.cn/microanswer_head.png" style="width: 60px;min-width:60px;height: 60px;border-radius: 50%;">
        <div style="display: inline-block;word-break: break-all;margin-left: 20px">
            大家好，我是自定义下拉内容，在这里你可以放任何你希望放置的下拉内容哦。<br><br>
            <button class="layui-btn layui-btn-xs layui-btn-primary modify">修改信息</button>
            <button class="layui-btn layui-btn-xs openvip">开通会员</button>
        </div>
    </div>
</script>

<!-- 自定义下拉菜单内容 - 图片 -->
<script id="myimg" type="text/html">
    <img src="https://file.microanswer.cn/microanswer_head.png" style="width: 150px;height: 150px;">
</script>
<!-- 表格行toolbar模板 -->
<script id="tb" type="text/html">
    <button class="layui-btn layui-btn-xs" lay-filter="ft{{d.id}}" lay-dropdown="{align:'right', menus: [{layIcon:'layui-icon-username',txt: '详细信息', event:'{{d.id}}-detail'}, {layIcon: 'layui-icon-set',txt: '开通会员', event:'{{d.id}}-openvip'}, {layIcon: 'layui-icon-logout', txt: '删除账户', event:'{{d.id}}-deleteaccount'}]}">
        <span>操作</span>
        <i class="layui-icon layui-icon-triangle-d"></i>
    </button>
</script>
<!-- 表格行toolbar模板 -->
<script id="tb2" type="text/html">
    <button class="layui-btn layui-btn-xs" id="layuidropdown_{{d.id}}" lay-dropdown="{align:'right', templateMenu: 'table2toolMenu'}">
        <span>操作</span>
        <i class="layui-icon layui-icon-triangle-d"></i>
    </button>
</script>

<script id="table2toolMenu" type="text/plain">
[
  [{header: '菜单', fixed: true}]
  [{layIcon: 'layui-icon-edit',            txt: '修改用户名',     event:'edit'}]

  {{# if(d.score > 130) { }}
    [{layIcon: 'layui-icon-praise',            txt: '成绩优异',     event:'scre_good'}]
  {{# } else { }}
    [{layIcon: 'layui-icon-tread',          txt: '成绩不合格',     event:'scre_to_low'}]
  {{# } }}

  [{layIcon: 'layui-icon-delete',          txt: '干掉他',         event:'delete'}]
  [{layIcon: 'layui-icon-face-smile-fine', txt: 'OHHHHHHHHHHHH', event:'info'}]
]
</script>

<script>

    layui.config({
        base: '//repo.bfw.wiki/bfwrepo/js/layui/lay/modules/'
    }).use(['dropdown', 'table', 'layer', 'jquery'], function () {
        var table    = layui.table;
        var $        = layui.jquery;
        var dropdown = layui.dropdown;
        var layer    = layui.layer;


        // ====================================================================================

        dropdown.suite("[lay-filter='test0']", {
            immed: true,
            menus: [[
                {txt: "菜单1", event: "menu1"},
                {txt: "菜单2", event: "menu2"},
                {txt: "菜单3", event: "menu3"},
                {txt: "菜单4", event: "menu4"},
            ]],
            onShow: function ($maker, $down) {
                $maker.find(".layui-icon").css('transition-duration', '300ms');
                $maker.find(".layui-icon").css('transform', 'rotate(180deg)');
            },
            onHide: function ($maker, $down) {
                $maker.find(".layui-icon").css('transform', 'rotate(0)');
            },
            onItemClick: function (event, menu) {
                layer.msg("你点击了test0：" + event);
                console.log(menu)
            },
            maxHeight: 200
        });
        // dropdown.onFilter("test0",  function (event, menu) {layer.msg("你点击了test0：" + event); console.log(menu)});
        dropdown.onFilter("test1",  function (event) {layer.msg("你点击了test1：" + event);});
        dropdown.onFilter("test2",  function (event) {layer.msg("你点击了test2：" + event);});
        dropdown.onFilter("test3",  function (event) {layer.msg("你点击了test3：" + event);});
        dropdown.onFilter("test4",  function (event) {layer.msg("你点击了test4：" + event);});
        dropdown.onFilter("test5",  function (event) {layer.msg("你点击了test5：" + event);});
        dropdown.onFilter("test6",  function (event) {layer.msg("你点击了test6：" + event);});
        dropdown.onFilter("test7",  function (event) {layer.msg("你点击了test7：" + event);});
        dropdown.onFilter("test10", function (event) {layer.msg("你点击了test10：" + event);});

        dropdown.suite("[lay-filter='test8']", {
            template: "#mymenu",
            success: function ($dom) {
                $dom.find(".modify").click(function () {
                    layer.msg("你点击了【修改信息】");
                    dropdown.hide(&.........完整代码请登录后点击上方下载按钮下载查看