CSS/Javascript based drop down menu. Issue with onclick event

Question

I am having some issue getting a menu to .hide() after clicking on an element.

$(document).on("click", "div.dropdown", function() {
  $(this).find("ul").show(0, function() {
    $(this).find("li").click(function() {
      var a = $(this).html();
      $(this).parent().parent().find(".dropdown-title p").html(a);
      $(this).parent().hide(); //Onclick won't hide the UL
    });
    $(this).mouseleave(function() {
      $(this).hide();
    });
  });
  return false;
});

div.dropdown {
  margin: 0 20px 0 0;
  float: left;
  border-radius: 3px;
  background: rgba(0, 0, 0, .1);
  height: 50px;
  line-height: 50px;
  color: #999;
  text-transform: uppercase;
  position: relative;
}

div.dropdown div.dropdown-title {
  padding: 0 20px;
  display: inline-block;
  cursor: pointer;
}

div.dropdown div.dropdown-title p {
  margin: 0 20px 0 0;
  float: left;
  font-size: 12px;
}

div.dropdown div.dropdown-title span {
  float: left;
}

div.dropdown ul {
  position: absolute;
  top: 50px;
  left: 0;
  width: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 0 0 3px 3px;
  z-index: 1001;
  border: 1px solid #ccc;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

div.dropdown ul li {
  line-height: 32px;
  background: #fff;
  color: #999;
  font-size: 12px;
  white-space: nowrap;
  text-transform: uppercase;
  padding: 0 20px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <div class="dropdown-title">
    <p>Sort By</p>
    <span><i class="fa fa-caret-down" aria-hidden="true"></i></span>
  </div>
  <ul style="display: none;">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
    <li>Option 7</li>
    <li>Option 8</li>
  </ul>
</div>

I am attempting to get the dropdown menu (the ul element) to .hide() when you click on one of the li elements in the menu, as well as when you mouseleave from the ul. Right now, just the mouseleave portion works and not when you click on one of the li elements. I am unsure of what I am overlooking, so if you see any errors or issue please let me know.

Here's the link to my fiddle

When you click div.dropdown you show the ul which is within the div.dropdown. When you click on a ul item in the menu it run both the code $(this).parent().first().hide(); AND $(this).find("ul").show(0, function() { as clicking on the ul will fire the div.dropdown click handler. Hope that helps. — Dean Meehan
– Dean Meehan, Commented Apr 30, 2017 at 13:46

naortor · Accepted Answer · 2017-04-30 13:52:52Z

3

When clicking on the li the event propagating to the ul, so what really happens that the click on the li closing the list but the 'click' on the ul opens it again, you can stop the event propagation

$(document).on("click", "div.dropdown", function() {
    $(this).find("ul").show(0, function() {
        $(this).find("li").click(function(event) {
            event.stopPropagation();
            var a = $(this).html();
            $(this).parent().parent().find(".dropdown-title p").html(a);
            $(this).parent().hide(); //Onclick won't hide the UL
        });
        $(this).mouseleave(function() {
            $(this).hide();
        });
   });
   return false;
});

answered Apr 30, 2017 at 13:52

naortor

2,09714 silver badges26 bronze badges

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

3 Comments

zeropsi Over a year ago

More times than not, I always forgot to check if the event is propagating. Thank you for the help and point this out.

zeropsi Over a year ago

Quick question. If I add an alert to the click on the li element, and then go back and click on another item, it fires the alert multiple times. Why is that? I thought the stopPropagation would take care of that? jsfiddle.net/rtf7j2hk/4

zeropsi Over a year ago

It appears that if I unbind the click event on the li it will not only stop the propagation, but also stop the alert from firing multiple times. Any downside to this? jsfiddle.net/rtf7j2hk/5

Collectives™ on Stack Overflow

CSS/Javascript based drop down menu. Issue with onclick 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