Question

jQuery Mobile在键盘式手机上怎么用方向键移动焦点

Answer 1

<p>请使用键盘上的“上下左右”键选择列表单元，使用“回车键”打开隐藏内容</p>
<ul>
<li class="withoutfocus">单元一<div>隐藏文字一</div></li>
<li class="withoutfocus">单元二<div>隐藏文字二</div></li>
<li class="withoutfocus">单元三<div>隐藏文字三</div></li>
<li class="withoutfocus">单元四<div>隐藏文字四</div></li>
<li class="withoutfocus">单元五<div>隐藏文字五</div></li>
<li class="withoutfocus">单元六<div>隐藏文字六</div></li>
<li class="withoutfocus">单元七<div>隐藏文字七</div></li>
<li class="withoutfocus">单元八<div>隐藏文字八</div></li>
</ul>

ul {background:#333;width:240px;list-style: none;overflow: hidden; padding: 20px;margin:0 auto;}
li {padding: 5px; width:110px;float:left;}
.withfocus {color: #fff;background:#363;}
.withoutfocus {color: #999; }
$(document).ready(function() {
// 初始化jQuery Keynav插件
$('ul li').keynav('withfocus', 'withoutfocus');
// 设定第一个单元为焦点
$('ul li:first').removeClass().addClass('withfocus');
// 监听“点击”事件展开隐藏内容
$('ul li').bind("click", function() {
openUp($(this));
});
// 缺省状态下隐藏所有“隐藏内容”
closeAll();
});

function openUp($e) {
closeAll();
$e.find("div").slideDown();
}

function closeAll() {
$('ul li').each(function() {
$(this).find("div").slideUp()
});
}