jquery div 下拉框焦點事件

這章與上一張《jquery input 下拉框(模擬select控件)焦點事件》類似

這章講述div的焦點事件如何使用

div的焦點事件與input的焦點事件區別在於 需要多添加一個屬性：tabindex (Safari可能不支持) ; 這個屬性是可以讓鍵盤獲取到焦點事件，當然，我們只是用這個屬性來讓div有焦點而已; 為了不改變網頁原有的鍵盤屬性; 建議設置成  tabindex = '-1';  tabindex 默認為0,即在網頁中按下tab即可觸發，第一下tab就觸發當前事件;

ps : div還有一個屬性 (html5新屬性) 可以讓其獲得焦點，但不建議用在這; contenteditable="true"; 這個屬性還有一個特性就是可以讓div變成input那樣，可編輯特性！

下面是html結構：

  <div class="div-box" tabindex="-1">
    <p class="text"><span class="texts">Holle Word</span> <span class="tip"></span></p>
    <ul class="dropdown-menu">
      <h4>Holle Word</h4>
      <hr>
      <li>test</li>
      <li>dome</li>
      <li>標簽</li>
    </ul>
  </div>

 

css : 

    .div-box {
      position: relative;
      display: inline-block;
      outline: 0;
    }
    
    .text {
      height: 32px;
      line-height: 32px;
      margin: 0;
      padding: 0 6px;
      cursor: pointer;
    }
    
    .dropdown-menu {
      position: absolute;
      width: 200px;
      color: #FFF;
      margin: 0;
      padding: 10px;
      list-style: none;
      border-radius: 10px;
      background-color: #555;
      -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
      box-shadow: 0 5px 15px rgba(255, 255, 255, .1);
    }
    
    .dropdown-menu h4 {
      text-align: center;
      margin: 10px 0;
    }
    
    .dropdown-menu li {
      border-bottom: 1px solid #999;
      padding: 0 6px;
      line-height: 28px;
    }
    
    .dropdown-menu li:hover {
      background-color: black;
      cursor: pointer;
    }
    
    .tip {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 10px solid #555;
      display: inline-block;
    }

js :

    var isBox = false; // 定義一個觸發焦點事件的開關，默認為不開啟狀態 || 也可以給input設置一個屬性，來判斷
    $(".dropdown-menu").hide();
    $(".div-box").focus(function () { // div綁定焦點事件，觸發時打開焦點開關
      $(this).find(".dropdown-menu").show();
      isBox = true;
    })
    $(".div-box").mousemove(function () { // 鼠標在div區域內打開焦點開關
      isBox = true;
    });
    $(".div-box").mouseout(function () { // 鼠標在div區域外關閉焦點開關
      isBox = false;
    });
    $(".div-box").blur(function () { // div失去焦點時通過焦點開關狀態判斷鼠標所在區域
      if (isBox == true) return false;
      $(this).find(".dropdown-menu").hide();
    });
    $(".dropdown-menu").find('li').each(function () { 
      $(this).on("click", function () {
        isBox = false;
        var text = $(this).text();
        $(this).parent().siblings(".text").find(".texts").text(text);
        $(this).parent().parent().blur(); // *********  清除焦點事件  (div本身是沒焦點的)
        $(this).parent().hide();
      })
    })

這章與上一章《jquery input 下拉框(模擬select控件)焦點事件》大致相同 ，區別在於tabindex 屬性 和 在點擊后需要移除div的焦點事件;

 

本章鏈接：http://www.cnblogs.com/ZevEssay/p/5953205.html