我有以下问题:
我有一个div,可以是“display:block”或“display:hidden”。 虽然它是可见的,但它包含一个无序列表。 可以通过ul。
的条目进行选项卡现在我想在用户从最后一个标签到“外部”标签时隐藏父div。怎么办呢?
<div class="ms-drop" style="display: block;">
<ul>
<li><input name="options" type="checkbox" value="A"> Typ A</li>
<li><input name="options" type="checkbox" value="B"> Typ B</li>
<li><input name="options" type="checkbox" value="C"> Typ C</li>
</ul>
</div>
目前焦点会改变li的bg颜色,不介意。 我只需要知道用户何时到达最后一个li然后然后再次点击TAB“走出去”(并且只有Tab,因为他也可以退回到同时按下Shift + Tab)。然后div必须关闭。
的jsfiddle: http://jsfiddle.net/SchweizerSchoggi/so03fcro/1/
很多任何帮助!
答案 0 :(得分:0)
将ID添加到列表中的最后一项,如下所示:
<div class="ms-drop" style="display: block;">
<ul>
<li class="selected">
<label>
<input name="ProcessType" type="checkbox" checked="checked" value="A"> Typ A
</label>
</li>
<li class="selected">
<label>
<input name="ProcessType" type="checkbox" checked="checked" value="B"> Typ B
</label>
</li>
<li class="selected" id="last">
<label>
<input name="ProcessType" type="checkbox" checked="checked" value="C"> Typ C
</label>
</li>
</ul>
</div>
然后将以下行添加到您的jquery代码中:
$(document).ready( function() {
$('.ms-drop ul > li').focusin( function() {
$(this).addClass('focus');
});
$('.ms-drop ul > li').focusout( function() {
$(this).removeClass('focus');
});
$('#last').focusout(function(){
$('.ms-drop').hide();
});
});
答案 1 :(得分:0)
我的想法是在焦点位于最后一个li或按下键代码9 + shiftKey时检查是否仅按下了键代码9(选项卡)。如果按下两个键:什么都不做。如果在最后一个元素上仅按Tab键:关闭div。
$('.ms-drop ul > li:last-child').keydown(function (e) {
if (e.which == 9 && e.shiftKey) {
// do nothing
} else if (e.which == 9) {
$('.ms-drop').hide();
}
});
这是否有意义还是有更好的解决方案? http://jsfiddle.net/SchweizerSchoggi/so03fcro/6/