layui下拉菜单的按钮组，点击和鼠标滑过显示子菜单

﹏ヽ暗。殇╰゛Y 2022-12-10 07:08 458阅读 0赞

![在这里插入图片描述][20200924142838270.png_pic_center]

<script type="text/html" id="toolbar">
      <div class="layui-btn-container" style="display:flex">
           
            <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="stPurchaseFareH:delete">
                删除
            </button>
            <ul class="layui-nav layui-btn btnz" lay-filter="" style="font-size: 12px;border-radius: 4px;float: right;padding:0px 0px 0px 0px;margin-left: 2px;height:32px">
                <li class="layui-nav-item" style="line-height: 30px;font-size: 12px;">
                    <a  style="color:white;font-size: 12px;padding: 2px 30px 3px 20px;letter-spacing:1px;width:88px" id="exportClick"> + 新增<span class="layui-nav-more" style="right: 10px;font-size: 12px;" ></span></a>
                    <dl class="layui-nav-child" style="top: 30px;line-height: 30px;width:168px;background-color:#fff ;border:white" id="exportEncrypt"> 
                        <dd>
                            <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-fluid" style="width:168px;margin-bottom:0;border-radius: 0px;"  lay-event="addNC" shiro:hasPermission="stPurchaseFareH:add">菜单一</button>
                        </dd>
                        <dd>
                            <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-fluid"style="width:168px;margin-bottom:0;border-radius: 0px;" lay-event="add" shiro:hasPermission="stPurchaseFareH:add">菜单二</button>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </script>

**方法一：点击显示按钮：**

//组合按钮
       $("#exportClick").click(function(e) { 
       $("#exportEncrypt").toggle();
      });

![在这里插入图片描述][20200926085216981.png_pic_center]

**方法二：鼠标滑过显示按钮**

$('#exportClick').hover(  //鼠标滑过导航栏目时
    
          function(){ 
            $('#exportEncrypt').show();  //显示下拉列表
            //设置导航栏目样式
            $(this).css({ 'color':'red','background-color':'orange'}); 
           },
    
          function(){ 
            $('#exportEncrypt').hide();  //鼠标移开后隐藏下拉列表
            }
      );
     $('#exportEncrypt').hover(  //鼠标滑过下拉列表自身也要显示，防止无法点击下拉列表
    
          function(){ 
           $('#exportEncrypt').show();
          },
          function(){ 
           $('#exportEncrypt').hide();
            //鼠标移开下拉列表后，导航栏目的样式也清除
           $('#exportClick').css({ 'color':'white','background-color':'blue'}); 
           }
     );

[20200924142838270.png_pic_center]: /images/20221123/66efdaba7aba4f0cbecb502c0961aef5.png
[20200926085216981.png_pic_center]: /images/20221123/7a239e8d62ea448cbe0dc690033c4948.png

发表评论取消回复

表情：

评论列表（有 0 条评论，458人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui下拉菜单的按钮组，点击和鼠标滑过显示子菜单

![在这里插入图片描述][20200924142838270.png_pic_center] <script type="text/html" id="toolbar

﹏ヽ暗。殇╰゛Y/ 2022年12月10日 07:08/ 0 赞/ 459 阅读

相关 Bootstrap教程(19)--下拉菜单、按钮式下拉菜单

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. 下拉菜单 2.1 普通下拉菜单 2.

Bertha 。/ 2022年11月03日 11:28/ 0 赞/ 92 阅读

相关鼠标悬浮导航栏显示下拉菜单

在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法，html和css样式就不贴代码了。 1、原生js <script> // window.

布满荆棘的人生/ 2022年10月27日 05:24/ 0 赞/ 394 阅读

相关 html鼠标经过自动下拉菜单,js css鼠标悬停显示下拉菜单

个人信息维护学生信息修改修改密码\--%> 修改密码\--%> 修改密码--%> 退出登录用户：

傷城~/ 2022年10月05日 13:57/ 0 赞/ 336 阅读

相关 jquery点击下拉菜单鼠标移开隐藏(可模拟下拉框)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

太过爱你忘了你带给我的痛/ 2022年09月27日 12:28/ 0 赞/ 179 阅读

相关 jquerty鼠标移上显示隐藏菜单简洁下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

快来打我*/ 2022年09月26日 12:57/ 0 赞/ 215 阅读

相关 Bootstrap下拉菜单（Dropdowns）和按钮

1.下拉菜单 <div class="dropdown"> <button type="button" class="btn dropdown-togg

忘是亡心i/ 2022年08月23日 08:16/ 0 赞/ 241 阅读

相关点击按钮实现下拉菜单的三级联动

主要内容：点击查询品牌按钮，选择厂商1的时候，显示厂商1的品牌，点击厂商二的时候，显示厂商2的品牌，同理，不同的品牌对应不同的型号源代码： <!DOCTYPE h

浅浅的花香味﹌/ 2022年06月08日 09:38/ 0 赞/ 231 阅读

相关 Bootstrap 下拉菜单和按钮

一、下拉菜单：用于显示链接列表的可切换、有上下文的菜单 .dropdown 菜单用于指定下拉菜单，下拉菜单都包裹在 .dropdown 或者 .dropup

r囧r小猫/ 2022年03月22日 16:24/ 0 赞/ 343 阅读

相关 bootstrap-按钮下拉菜单

1.运行效果如图所示 [![wKiom1klPKGh8gRbAAAg9x1p0iM566.png-wh\_50][wKiom1klPKGh8gRbAAAg9x1p0iM5

Myth丶恋晨/ 2021年09月19日 05:00/ 0 赞/ 421 阅读