Question

我有以下问题：

我有一个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/

很多任何帮助！

Answer 1

将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();
    });

});

Answer 2

好吧，我找到了一个解决方案，而且我已经更新了小提琴。

我的想法是在焦点位于最后一个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/

选项卡通过UL并在标签显示时关闭div

2 个答案: