你的位置:首页 > Java教程

[Java教程]jQuery div 下拉框焦点事件


这章与上一张《jQuery input 下拉框焦点事件》类似

这章讲述div的焦点事件如何使用

div的焦点事件与input的焦点事件区别在于 需要多添加一个属性:tabindex; (Safari可能不支持)   这个属性是可以让键盘获取到焦点事件,当然,我们只是用这个属性来让div有焦点而已;为了不改变网页原有的键盘属性 ;建议设置成   tabindex = '-1';  tabindex 默认为0,即在网页中按下tab即可触发,第一下tab就触发当前事件;

下面是html结构:

 <div class="div-box" tabindex="-1">  <p class="text">Holle Word <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").text(text);    $(this).parent().parent().blur(); // ********* 清除焦点事件 (div本身是没焦点的)    $(this).parent().hide();   })  })

这章与上一章input大致相同 ,区别在于tabindex 属性 和 在点击后需要移除div的焦点事件