Tab through UL and close div when tabbing outside

by Bianca Kuehweidner

HTML

<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">
           <label>
               <input name="ProcessType" type="checkbox" checked="checked" value="C"> Typ C
           </label>
       </li>
    </ul>
</div>

CSS

ul { list-style-type: none; }

.ms-drop { border: solid 1px #f00; }

.ms-drop ul li:hover, 
.ms-drop ul li.focus  { background-color: #e2e9f4; }

JavaScript

$(document).ready( function() {
    $('.ms-drop ul > li').focusin( function() {
        $(this).addClass('focus');
    });
    
    $('.ms-drop ul > li').focusout( function() {
        $(this).removeClass('focus');
    });
            
    $('.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();
        }
    });

});