滑鼠滑過，展示下拉選單

wang_0720發表於2017-08-07
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/，如需轉載，請註明出處，否則將追究法律責任。

相關文章