bootstrap鼠标点击弹出菜单，鼠标经过弹出菜单

来源：互联网发布：python简明教程编辑：程序博客网时间：2024/05/16 18:30

<ul class="nav navbar-nav user-menu navbar-right">    <li class="dropdown user-avatar">        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"           aria-expanded="false" style="padding: 0px;">            <img style="width:32px;height: 32px" alt="{{ Auth()->user()->name }}"                 src="{{ route('website.image.avatar',['avatar_name'=>Auth()->user()->id.'_middle'])}}">        </a>        <ul class="dropdown-menu" role="menu" style="background-color: #133340">            <li><a href="{{ route('auth.profile.base') }}">用户中心</a></li>            <li><a href="{{ route('auth.businss.base') }}">预定展位</a></li>            <li><a href="{{route('auth.businss.layout')}}">布置展位</a></li>            <li><a href="{{ route('auth.businss.base') }}">展商资料</a></li>            <li><a href="{{ route('productdae.index') }}">启用展馆</a></li>            <li><a href="{{ route('auth.user.logout') }}">退出登录</a></li>        </ul>    </li></ul>

以上为点击用户头像出现下拉菜单实例，如果需要鼠标经过弹出下拉菜单需在页面添加如下JS

$(function(){    $('li.dropdown').mouseover(function() {        $(this).addClass('open');    }).mouseout(function() {        $(this).removeClass('open');    });});

1 0