Dropdown menu with propagation problem

Question

Dropdown menu with propagation problem

Navigation

#1 by (0 votes)

1

Can anyone help me understand why clicking on the menu options sometimes causes the container to lose the hover and close the container?

Below is my code:

<style>
    ul.nav-menu__consultora,
ul.nav-menu__consultora ul{
    padding: 0;
    margin: 0;
    position: relative;
}
ul.nav-menu__consultora ul li{
    padding: 5px;       
}
.nav-menu__consultora{   
    cursor: pointer;
}
.menu__consultor,
.opcao--queiro-consultor-type,
.opcao--soy-consultor-type{
    display: none;
}
.option-consultor:hover .menu__consultor,
.open{
    display: block;
}
.nav-menu__consultora li {
    list-style: none;
}
</style>
<nav class="menu-header__consultora">
    <ul class="nav-menu__consultora">
        <li class="option-consultor">Consultor(a)
            <ul class="menu__consultor">
                <li class="opcao--queiro-consultor opcao--consultor">Quiero ser Consultor(a)
                    <ul class="opcao--queiro-consultor-type opcao-type">
                        <li>Digital</li>
                        <li>Presencial</li>
                    </ul>
                </li>
                <li class="opcao--soy-consultor opcao--consultor"> Soy Consultor(a)
                    <ul class="opcao--soy-consultor-type opcao-type">
                        <li>Digital</li>
                        <li>Presencial</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

<script>
    var opcoesConsultor = document.querySelectorAll('.opcao--consultor');
    var opcoesType = document.querySelectorAll('.opcao-type');

    opcoesConsultor.forEach(function(opcao, i){
        opcao.addEventListener('click', function(e){
            opcoesType[i].classList.toggle('open');
        })
    })
</script>

javascript

asked by anonymous 27.05.2018 / 18:10

1 answer

How to round position in Unity Delete Oracle - Api Web

score 0 · Accepted Answer

I suggest first creating a flag (variable for control) and creating a new event click for the .menu__consultor menu to change the value of the flag. The menu will only close when the flag is false . When you click on the menu options, the flag becomes true and then false again. This way, the menu will not be closed in the click because if in mouseout will not allow. This is because the mouseout event is called when you click the menu.

See:

var opcoesConsultor = document.querySelectorAll('.opcao--consultor');
var opcoesType = document.querySelectorAll('.opcao-type');
var menu = document.querySelector('.menu__consultor');
var flag = false; // flag

opcoesConsultor.forEach(function(opcao, i){
  opcao.addEventListener('click', function(e){
      opcoesType[i].classList.toggle('open');
      menu.classList.add('open');
  })
  opcao.addEventListener('mouseover', function(){
      menu.classList.add('open');
      flag = false;
  })
})

opcoesType.forEach(function(type, i){
  type.addEventListener('mouseover', function(){
      menu.classList.add('open');
      flag = false;
  })
})

menu.addEventListener("mouseout", function(){
   if(!flag) menu.classList.remove('open');
})

// eventos adicionados
menu.addEventListener("click", function(){
   flag = true;
})

menu.addEventListener("mousemove", function(){
   flag = false;
})

ul.nav-menu__consultora,
ul.nav-menu__consultora ul{
  padding: 0;
  margin: 0;
}
ul.nav-menu__consultora ul li{
  padding: 5px;
  display: block;
}
.nav-menu__consultora{   
  cursor: pointer;
}
.menu__consultor,
.opcao--queiro-consultor-type,
.opcao--soy-consultor-type{
  display: none;
  background: red; /* fundo vermelho apenas para ilustrar */
}
.option-consultor:hover .menu__consultor{
  display: block;
}
.open{
  display: block;
}

<nav class="menu-header__consultora">
    <ul class="nav-menu__consultora">
        <li class="option-consultor">Consultor(a)
            <ul class="menu__consultor">
                <li class="opcao--queiro-consultor opcao--consultor">Quiero ser Consultor(a)
                    <ul class="opcao--queiro-consultor-type opcao-type">
                        <li>Digital</li>
                        <li>Presencial</li>
                    </ul>
                </li>
                <li class="opcao--soy-consultor opcao--consultor"> Soy Consultor(a)
                    <ul class="opcao--soy-consultor-type opcao-type">
                        <li>Digital</li>
                        <li>Presencial</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>