鼠标滑过，展示下拉菜单

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 图示：

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/27181165/viewspace-2143186/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/27181165/viewspace-2143186/