How to close the dropdown if the user clicks outside of it?

Question

I am making user dropdown when we click on the picture we get a dropdown or a card. I want to close it when user click outside of dropdown. The code of closing will be in JavaScript. Please solve this problem. I think there will be a remove function in JavaScript which will remove the dropdown after clicking on it.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Simple popup menu</title>

<style>
    body {
        margin: 0;
        background: tomato;
        font-family: 'Open Sans', sans-serif;
    }

    .menubtn {
        cursor: pointer;
        width: 40px;
        height: 20px;
        right: 10px;
        top: 10px;
        position: absolute;
    }

    .userimg {
        border-radius: 50%;
        height: 35px;
        width: 35px;
    }

    .navmenu {
        width: 150px;
        border-radius: 10px;
        margin-top: 30px;
        background: #fff;
        position: absolute;
        right: 18px;
        top: 25px;
        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
        z-index: 10;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
    }

    .navmenu.opened {
        visibility: visible;
        opacity: 1;
    }

    .navmenu::before {
        content: '';
        position: absolute;
        top: -5px;
        right: 7px;
        width: 15px;
        height: 15px;
        background: #fff;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .navmenu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .navmenu ul.text-list {
        text-align: left;
        font-weight: 100;
        width: 100%;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navmenu ul.text-list li a {
        text-decoration: none;
        padding-left: 20px;
        padding-top: 5px;
        color: #343434;
        font-weight: 600;
        display: block;
        line-height: 27px;
        -webkit-transition: all 200ms ease;
        transition: all 200ms ease;
    }

    .navmenu ul.text-list li a:hover {
        color: tomato;
    }
</style>
</head>

<body>
<div class="menubtn">
    <span>
        <img class="userimg" src="http://tryma.in/images/user/default.png"/>
    </span>
</div>
<div class="navmenu">
    <ul class="text-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $('.menubtn').on('click', function() {
        $('.navmenu').toggleClass('opened');
    });
</script>
</body>

</html>

Please help me in solving this code. Thank You

There is an onBlur event which may help. – Sid Oct 21 '18 at 11:32 — Sid, Oct 21 '18 at 11:32

score 1 · Accepted Answer · answered Oct 21 '18 at 11:38

Bind click on document and remove opened class on click of document.
Use e.stopPropagation() so that event does not propagate on document which event is invoked on click of the .menubtn

$('.menubtn').on('click', function(e) {
  e.stopPropagation();
  $('.navmenu').toggleClass('opened');
});
$(document).on('click', function() {
  $('.navmenu').removeClass('opened');
});

body {
  margin: 0;
  background: tomato;
  font-family: 'Open Sans', sans-serif;
}

.menubtn {
  cursor: pointer;
  width: 40px;
  height: 20px;
  right: 10px;
  top: 10px;
  position: absolute;
}

.userimg {
  border-radius: 50%;
  height: 35px;
  width: 35px;
}

.navmenu {
  width: 150px;
  border-radius: 10px;
  margin-top: 30px;
  background: #fff;
  position: absolute;
  right: 18px;
  top: 25px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.navmenu.opened {
  visibility: visible;
  opacity: 1;
}

.navmenu::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 7px;
  width: 15px;
  height: 15px;
  background: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.navmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navmenu ul.text-list {
  text-align: left;
  font-weight: 100;
  width: 100%;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.navmenu ul.text-list li a {
  text-decoration: none;
  padding-left: 20px;
  padding-top: 5px;
  color: #343434;
  font-weight: 600;
  display: block;
  line-height: 27px;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.navmenu ul.text-list li a:hover {
  color: tomato;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menubtn">
  <span>
        <img class="userimg" src="http://tryma.in/images/user/default.png"/>
    </span>
</div>
<div class="navmenu">
  <ul class="text-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

This is actually a bad answer due to breaking DOM event propagation. Look at: https://css-tricks.com/dangers-stopping-event-propagation/ on that. — Marco, Oct 21 '18 at 12:14

How to close the dropdown if the user clicks outside of it?

1 Answers1