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

时间:2015-02-02 09:39:28

标签: jquery html5

我有以下问题:

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

很多任何帮助!

2 个答案:

答案 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/