Estoy tratando de crear una funcionalidad muy simple para crear un menú desplegable debajo de un determinado campo de texto cuando se hace clic.
$(".val").children("div").on("click", function() { alert("CLICK"); }); .container { display: inline-block; } .val { display: none; position: absolute; z-index: 1; } .container:focus-within .val { display: block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="lab" contenteditable>LABEL</div> <div class="val"> <div>VAL1</div> <div>VAL2</div> </div> </div>El problema principal viene con la función de clic que nunca se activa... (Supongo que primero ejecuta el foco perdido en CSS y luego no se hace clic en ese elemento porque está oculto).
Aunque hay una "alerta" allí, quiero usar el evento de click para volver a establecer el valor en el campo .lab como un menú desplegable.
En la solución a continuación, hacer clic en el elemento <div> con el estilo de clase .lab aplicado activará el primer detector de eventos y la lista desplegable será visible. Al hacer clic en cualquiera de los elementos <div> en la lista desplegable que implementa el estilo de clase .clickable , se activa el segundo detector de eventos. En este caso, la lista desplegable se cierra y el valor de identificación del elemento <div> en el que se hizo clic se imprime en la consola.
/* Fires when clicking the <div> element with the ".lab" class style applied. */ $(document).on('click', '.lab', function(event) { event.stopPropagation(); console.clear(); console.log("The dropdown list opens."); /* Open Dropdown List */ $('.val').attr('style', 'display: inline-block'); /* Fires when clicking the <div> element with the ".clickable" class style applied. */ $(document).on('click', '.clickable', function(event) { event.stopPropagation(); console.clear(); console.log(`Clicked Container ID: ${$(this).attr('id')}`); /* Close Dropdown List */ $('.val').attr('style', 'display: none'); }); $(document).on('click',function(event){ event.stopPropagation(); $('.val').attr('style', 'display: none'); }); }); div { padding: 5px; } .container { display: inline-block; } .lab { border: 1px solid blue; margin-bottom: 5px; cursor: pointer; } .val { display: none; position: absolute; z-index: 1; } .container:focus-within .val { display: block; } .clickable { cursor: pointer; border: 1px solid red; margin-bottom: 5px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="container"> <div class="lab" contenteditable>Open Dropdown</div> <div class="val"> <div id="first" class="clickable">First</div> <div id="second" class="clickable">Second</div> </div> </div> </body>