Auxilio Menu Drop
Preciso de uma ajuda....
Tenho um código que gera um botao dropdown e dentro dele gera um segundo nivel....
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
position: relative;
}.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Segundo <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Primeiro <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">3nd level dropdown</a></li>
<li><a tabindex="-1" href="#">4nd level dropdown</a></li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
o que acontece
Se eu clico em "Primeiro" abre um menu de subitens ao lado .... quando eu clico de novo ele fecha (ate ai ok)
Mas supondo que eu clique em "Primeiro" (abre ao lado) ... mas sem clicar pra fechar eu clico em "Segundo" (abre o submenu ao lado mas sem fechar o primeiro).
e isso acaba deixando empilhado..
Gostaria q quando tu clica em Segundo (caso o primeiro esteja expandido ele feche) e vice-versa.
Na imagem coloquei o q esta acontecendo.....
Discussão (0)
Carregando comentários...