温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

鼠标滑过,展示下拉菜单

发布时间:2020-08-11 23:52:19 来源:ITPUB博客 阅读:216 作者:wang_0720 栏目:建站服务器
1 html

点击(此处)折叠或打开

  1.        <div class="user">
  2.           <div class="dropdown">
  3.             <a class="dropdown-toggle" data-toggle="dropdown" style="cursor: pointer;">
  4.               
  5.               {% if login_user_pic is not None %}
  6.               <img src="{{static_url("upload/img/" + login_user_pic)}}" class="img-circle" style="width: 45px;height: 45px;margin-top: -8px;">
  7.               {% else %}
  8.               <img src="{{static_url("img/user.jpg")}}" class="img-circle" style="width: 45px;height: 45px;margin-top: -8px;">
  9.               {% end %}
  10.               <b class="caret" style="margin-top: -9px;"></b>
  11.             </a>
  12.             <ul class="dropdown-menu">
  13.               <li >
  14.                 <a href="/users/{{login_user_id}}"><span class="glyphicon glyphicon-user" style="height: 30px;"> 我的主页</span></a>
  15.               </li>
  16.               <li >
  17.                <a href="/setting/basic"><span class="glyphicon glyphicon-wrench" style="height: 30px;"> 设置</span></a>
  18.               </li>
  19.               <li>
  20.                 <a href=""><span class="glyphicon glyphicon-phone" style="height: 30px;"> 联系我们</span></a>
  21.               </li>
  22.               <li>
  23.                 <a href="/logout"><span class="glyphicon glyphicon-off" style="height: 30px;"> 退出 {{login_user}}</span></a>
  24.               </li>
  25.             </ul>
  26.           </div>
  27.         </div>
2 js

点击(此处)折叠或打开

  1. //鼠标滑过导航栏下拉菜单展开
  2.   var timer;
  3.   $(".user").mouseover(function(){
  4.     clearTimeout(timer);
  5.     $(".dropdown-menu").show();
  6.   });
  7.   $(".user").mouseout(function(){
  8.     timer = setTimeout(function(){
  9.       $(".dropdown-menu").hide();
  10.     },100);
  11.   });
  12.   $(".dropdown-menu").mouseover(function(){
  13.     clearTimeout(timer);
  14.     $(".dropdown-menu").show();
  15.   });
  16.   $(".dropdown-menu").mouseout(function(){
  17.     $(".dropdown-menu").hide();
  18.   });
3 图示:
鼠标滑过,展示下拉菜单
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI