鼠标滑过，展示下拉菜单

发布时间：2020-08-11 23:52:19 作者：wang_0720
来源：ITPUB博客阅读：377

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

点击(此处)折叠或打开

3 图示：

相关阅读