DropDown duplo ativando ao inicar o projeto (HTML e JavaScript)
Opa, tudo certo? Estou em uma situação bem chatinha já, vou exemplificar, possuo 2 DropDown, onde são ativados pelo clique, porem quando inicio o projeto, por padrão já esta vindo com os 2 DropDown ativados, como consigo ajeitar isso?
(Exemplo, estou fazendo assim)
<li class="button-dropdown">
<a class="dropdown-toggle">
Exemplo 1 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="">
Sou o exemplo 1
</a>
</li>
</ul>
</li>
<li class="button-dropdown">
<a class="dropdown-toggle">
Exemplo 2 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="">
Sou o exemplo 2
</a>
</li>
</ul>
</li>
(Meu CSS)
.nav {
font-size: 16px;
border: none;
outline: none;
padding: 14px 16px;
font-family: inherit;
margin: 0;
border-radius: 10px;
color: white;
font-weight: bold;
display: block;
}
.dropdown-toggle
{
font-size: 16px;
border: none;
outline: none;
padding: 14px 16px;
font-family: inherit;
margin: 0;
border-radius: 10px;
color: white;
font-weight: bold;
position: all;
cursor: pointer;
}
.dropdown-menu{
padding-left: 20px;
}
<script>
jQuery(document).ready(function (e) {
function t(t) {
e(t).bind("click", function (t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function () {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
</script>
Ramboli
Curtidas 0