1 html
-
<div class="user">
-
<div class="dropdown">
-
<a class="dropdown-toggle" data-toggle="dropdown" style="cursor: pointer;">
-
-
{% if login_user_pic is not None %}
-
<img src="{{static_url("upload/img/" + login_user_pic)}}" class="img-circle" style="width: 45px;height: 45px;margin-top: -8px;">
-
{% else %}
-
<img src="{{static_url("img/user.jpg")}}" class="img-circle" style="width: 45px;height: 45px;margin-top: -8px;">
-
{% end %}
-
<b class="caret" style="margin-top: -9px;"></b>
-
</a>
-
<ul class="dropdown-menu">
-
<li >
-
<a href="/users/{{login_user_id}}"><span class="glyphicon glyphicon-user" style="height: 30px;"> 我的主页</span></a>
-
</li>
-
<li >
-
<a href="/setting/basic"><span class="glyphicon glyphicon-wrench" style="height: 30px;"> 设置</span></a>
-
</li>
-
<li>
-
<a href=""><span class="glyphicon glyphicon-phone" style="height: 30px;"> 联系我们</span></a>
-
</li>
-
<li>
-
<a href="/logout"><span class="glyphicon glyphicon-off" style="height: 30px;"> 退出 {{login_user}}</span></a>
-
</li>
-
</ul>
-
</div>
-
</div>
2 js
-
//鼠标滑过导航栏下拉菜单展开
-
var timer;
-
$(".user").mouseover(function(){
-
clearTimeout(timer);
-
$(".dropdown-menu").show();
-
});
-
$(".user").mouseout(function(){
-
timer = setTimeout(function(){
-
$(".dropdown-menu").hide();
-
},100);
-
});
-
$(".dropdown-menu").mouseover(function(){
-
clearTimeout(timer);
-
$(".dropdown-menu").show();
-
});
-
$(".dropdown-menu").mouseout(function(){
-
$(".dropdown-menu").hide();
-
});
3 图示：
|