I had this kind of scenario that I wanted for it to happen, this is when I click the button, there would be a drop down list that will appear, and if i click outside of it, it would collapse automatically.
My main problem is that, that button after clicking once, it had to be clicked twice for the dropdown list to appear.
let settingsmenu = document.querySelector(".settings-menu");
function settingsMenuToggle() {
document.addEventListener('click', function() {
settingsmenu.classList.toggle("settings-menu-height");
})
}#coverphoto, #profilephoto, .userpic{
height: 100%;
width: 100%;
}<ul style="right:10px; top:0px; margin-top:4px; margin-bottom: 5px;" class="navbar-nav ml-auto position-fixed end-50 ">
<li style="position:relative;" class="nav-item dropdown">
<a class="nav-link " role="button" onclick="settingsMenuToggle()">
<img src="<?php echo base_url();?>assets/image/user.png" width="40" height="40" class="userpic rounded-circle position-absolute">
</a>
<div class="dropdown-menu">
<a href="<?php echo base_url();?>pages/view/setting">Settings</a>
<a href="#">Customization</a>
<a href="<?php echo base_url();?>pages/view/logout">Logout</a>
</div>
</li>
</ul>