My goal is to develop a straightforward feature where a dropdown menu appears below a specific text field once it is clicked.
$(".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>The issue arises with the click function not triggering as expected... (Perhaps due to CSS taking precedence with focus first and preventing the click event from registering on the hidden element?)
Despite having an "alert" in place, my intention is to utilize the click event to populate the value back into the .lab field resembling a dropdown functionality.