鼠标滑过，展示下拉菜单

点击(此处)折叠或打开

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>

点击(此处)折叠或打开

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. });