CSS Simple Dropdown click event

Question

I am trying to build a very simple functionality to create a drop down under a certain text field when its 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>

Main problem comes with the click function which it never gets triggered... (I guess it runs first the lost focus in CSS and then no click is done in that element as its hidden?)

Even though there is an "alert" there, I want to use the click event to set the value back in the .lab field like a dropdown.

Sercan · Accepted Answer · 2022-02-06 19:55:36Z

1

In the solution below, clicking the <div> element with the .lab class style applied will fire the first event listener and the dropdown list will be visible. Clicking on any of the <div> elements in the dropdown list that implements the .clickable class style fires the second event listener. In this case, the dropdown list is closed and the id value of the clicked <div> element is printed to the console.

/* 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>

edited Feb 6, 2022 at 19:55

answered Feb 6, 2022 at 19:29

Sercan

5,1533 gold badges23 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

byle.05 Over a year ago

I like your approach :) But I see it is not being hidden when clicking outside... Mainly I was using CSS for this with .container:focus-within which was removing the class automatically. Do you mean its better to use the js to show hide than CSS for the overall Im trying?

Sercan Over a year ago

I fixed the problem you mentioned. Developing dynamic behavior with CSS is hard to understand. I prefer developing solutions with JS because it is more portable and repeatable.

byle.05 Over a year ago

Yup I think I wont spend much time in pure CSS... It is quite interesting what is able to do but indeed can be really confusing to read... Thanks!

Collectives™ on Stack Overflow

CSS Simple Dropdown click event

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related