Cómo ocultar un menú desplegable cuando el usuario hace clic fuera de él

Indagamos por el mundo online para así regalarte la respuesta a tu dilema, en caso de alguna pregunta puedes dejarnos la duda y contestamos porque estamos para servirte.

Solución:

En este caso, en onblur podría llamar a una función que dispara el undropdown(0); después de un setTimeout muy pequeño casi al instante. Al igual que:

function set() 
  setTimeout(function() 
    undropdown(0);
  , 100);

HTML

No se requiere ningún otro cambio.

function input(pos) 
  var dropdown = document.getElementsByClassName('drop');
  var li = dropdown[0].getElementsByTagName("li");

  document.getElementsByTagName('input')[0].value = li[pos].innerHTML;
  undropdown(0);


function dropdown(pos) 
  document.getElementsByClassName('content')[pos].style.display= "block"


function undropdown(pos) 
  document.getElementsByClassName('content')[pos].style.display= "none";


function set() 
  setTimeout(function() 
    undropdown(0);
  , 100);

        .drop 
            position: relative;
            display: inline-block;
            vertical-align:top;
            overflow: visible;
        

        .content 
            display: none;
            list-style-type: none;
            border: 1px solid #000; 
            padding: 0;
            margin: 0;
            position: absolute;
            z-index: 2;
            width: 100%;
            max-height: 190px;
            overflow-y: scroll;
        

        .content li 
            padding: 12px 16px;
            display: block;
            margin: 0;
        

   

        
        

            
Option 1
            
Option 2
            
Option 3
            
Option 4
        
    

Puede hacer que el menú desplegable sea enfocable con tabindex, y en la entrada blur El detector de eventos solo oculta el menú desplegable si el foco no fue al menú desplegable (ver Cuando ocurre onblur, ¿cómo puedo saber qué elemento se centró? a?)

input.addEventListener('blur', function(e)  !e.relatedTarget.classList.contains('content')) 
    undropdown(0);
  
);

function input(e) 
  var dropdown = document.getElementsByClassName('drop');
  var li = dropdown[0].getElementsByTagName("li");
  document.getElementsByTagName('input')[0].value = e.target.textContent;
  undropdown(0);

[].forEach.call(document.getElementsByTagName('li'), function(el) 
  el.addEventListener('click', input);
);
function dropdown(pos) 
  document.getElementsByClassName('content')[pos].style.display = "block"

function undropdown(pos) 
  document.getElementsByClassName('content')[pos].style.display = "none";

var input = document.getElementsByTagName('input')[0];
input.addEventListener('focus', function(e) 
  dropdown(0);
);
input.addEventListener('blur', function(e) );

.drop 
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: visible;

.content 
  display: none;
  list-style-type: none;
  border: 1px solid #000;
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 2;
  width: 100%;
  max-height: 190px;
  overflow-y: scroll;
  outline: none;

.content li 
  padding: 12px 16px;
  display: block;
  margin: 0;

  
  

    
Option 1
    
Option 2
    
Option 3
    
Option 4
  

Aquí tienes las reseñas y valoraciones

Si te ha sido útil este post, sería de mucha ayuda si lo compartieras con otros seniors y nos ayudes a difundir nuestra información.

---

---

Utiliza Nuestro Buscador