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:;
} .text {
height: 32px;
line-height: 32px;
margin:;
padding: 0 6px;
cursor: pointer;
} .dropdown-menu {
position: absolute;
width: 200px;
color: #FFF;
margin:;
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:;
height:;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #555;
display: inline-block;
}