In Google Chrome, how can I save my custom SELECT menu when someone clicks on it?

Question

I am using jQuery UI 1.12. I created custom selection menus (an unordered list modeled with SELECT input) that I would like to open when someone clicks on them, or when someone presses the Tab key to move the focus to one. To place an opening when getting focus, I have this JS

if ( !$this.parent().hasClass('select') ) {
        var $wrapper = $("<div />", {
            'class' : "select", 
        'tabIndex' : '1' 
    }).css({
            width   : selectWidth
    }).focus(function() {
    $(this).find('.select-styled').click(); 
}).blur(function() {
    clickHandled = false;
        $(this).find(".select-options li").removeClass("selected");
    $(this).find('.select-styled').removeClass('active').next('ul.select-options').hide(); 
});
    $this.wrap( $wrapper );
}   // if

However, if the screen width is less than 500 pixels, I want my user menu to fill the entire screen, so I added this style

@media only screen and (max-width:501px) {
  .active,
  .active + ul {
    width:100vw;
    height: 100vh;
    max-height: initial;
    position: fixed;
    top:0;
    left:0;
  }
}

, Google Chrome, 500 , . Fiddle . Firefox. Google Chrome, ?

Answer 1

;

$(document).click(function(event) {
    $styledSelect.removeClass('active');
    $list.hide();
});

, , . , , , . ; http://jsfiddle.net/aarmu2mf/

- , , , . , , , . - - : → → → - .

, , , .

Answer 2

.

52 :

var $list = $('<ul />', {
  'class': 'select-options'
}).insertAfter($styledSelect);

95 :

$(document).click(function(event) {
  $styledSelect.removeClass('active');
  $list.hide();
});

$list document. . , , , .

66:

$styledSelect.unbind('click');

, click, document. . , .