Estoy usando JQuery UI 1.12. Creé menús de selección personalizados (una lista desordenada, modelada a partir de una entrada SELECCIONAR) que me gustaría abrir cuando alguien haga clic en ellos, o cuando alguien haga clic en la tecla "Tab" para mover el foco a uno. Para acomodar la apertura al obtener el foco, tengo este 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 ); } // ifSin embargo, si la pantalla tiene menos de 500 píxeles de ancho, quiero que mi menú personalizado ocupe toda la pantalla, así que agregué este estilo
@media only screen and (max-width:501px) { .active, .active + ul { width:100vw; height: 100vh; max-height: initial; position: fixed; top:0; left:0; } }El problema es que, ahora solo en Google Chrome, cuando comprimo mi pantalla a menos de 500 píxeles y hago clic en mi menú personalizado, se cierra inmediatamente. Este violín ilustra este fenómeno. Esto no sucede en Firefox. ¿Cómo mantengo mi menú abierto en Google Chrome cuando hago clic en él?
El problema es este enlace;
$(document).click(function(event) { $styledSelect.removeClass('active'); $list.hide(); });Si elimina esta sección del código, funcionará como le gustaría. Abra el menú al enfocar, abra el menú al hacer clic, cierre el menú cuando haga clic en otro lugar. Mira mi tenedor aquí; http://jsfiddle.net/aarmu2mf/
Por alguna razón, no tuve tiempo de investigar más a fondo, cuando hace clic en una pantalla más pequeña, activa esta función cuando hace clic en el elemento por primera vez. Mi conjetura es que cuando hace clic en él, se enfoca, el estado de enfoque luego activa el clic. Lo que significa que el flujo es algo así como: Hacer clic -> La función abre el menú -> El navegador enfoca el elemento en el que se hizo clic -> La función vinculada al evento de enfoque activa un clic en el elemento - La función cierra el menú.
Además, tenga en cuenta que no es realmente un buen comportamiento abrir el menú al enfocar, la mayoría de los usuarios están acostumbrados a abrir menús desplegables con la barra espaciadora cuando tienen el foco en el elemento.
Pasando de los comentarios a una respuesta para aclarar mejor.
En la línea 52 de tu violín, veo:
var $list = $('<ul />', { 'class': 'select-options' }).insertAfter($styledSelect);En la línea 95, veo:
$(document).click(function(event) { $styledSelect.removeClass('active'); $list.hide(); }); Esto ocultaría $list al hacer clic en el document . Esto tiene sentido para borrar u ocultar el menú. Creo que debería hacer esto condicional, para ayudar a garantizar que no haya conflicto con otros eventos de clic.
Línea 66:
$styledSelect.unbind('click'); Esto debería desvincular el evento de clic, pero dado que es solo para un elemento específico y puede no afectar el evento de clic vinculado al document . Todavía investigando. Se actualizará sobre la marcha.