Tenía este tipo de escenario que quería que sucediera, esto es cuando hago clic en el botón, aparecerá una lista desplegable, y si hago clic fuera de ella, colapsará automáticamente.
Mi principal problema es que ese botón después de hacer clic una vez, tuvo que hacer clic dos veces para que apareciera la lista desplegable.
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>