I have a jquery script that only works after the page reload.
Why does this occur?
My script:
$(document.body).ready(function() {
$('.list').each(function(index){
var topli = $(this).children(":first-child");
topli.click(function(){
var parent = $(this).parent();
var sublis = parent.find(".sub");
if(sublis.is(':visible')){
sublis.slideUp();
topli.find('.fa-arrow-right').removeClass('rotatedown');
}else{
sublis.slideDown();
topli.find('.fa-arrow-right').addClass('rotatedown');
}
})
})
});
My jquery is the first script to be imported; This is the target of my script:
<div>
<ul class="list">
<button id="botaoconf" class="btn btn-amber btn-lg btn-group top" mat-button>
<i class="fa fa-cog iconemenu"></i>
<br>
Configurações <i class="fa fa-arrow-right"></i>
</button>
<li class="sub">
<a class="dropdown-item waves-effect" (click)="verificaPermissao(9, 'confestoque')">
<i class="mr-3 fa fa-archive"></i>Estoque</a>
</li>
<li class="sub">
<a class="dropdown-item waves-effect" (click)="verificaPermissao(10, 'confprecificacao')">
<i class="ml-1 mr-4 fa fa-dollar"></i>Precificação</a>
</li>
</ul>
</div>