Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ola!
Tenho uma lista de usuários e um link que abre uma div que mostra os detalhes deste usuario, este link usa o evento onClick do javascript.
O problema é que quando clicado para abrir a div, a tela sobe para o inicio do topo.
Preciso que a tela nao faça a rolagem para o topo e sim que fique na posição da lista.
Segue meu codigo abaixo.
Obrigado por momento
<div class="container">
<div class="row">
<?php?>
<div class="col-10"></div>
<div class="col-2">
<a href="#" onClick="Mudarestado('minhaDiv<?=$cod?>')"><img src="icons/chevron-right.svg"></a>
</div> Parte ficará visivel ao clicar no link OnClick
<div class="divacoes" id="minhaDiv<?=$cod?>" style="display:none">
<div class="row">
<div class="col">
... dados dos usuarios...
</div>
</div>
</div><?php
fim foreach que gera a lista de usuários...
?>
</div>
</div>
<style>
.divacoes {
background-color: #64A338;
border: none;
padding: 20px;
width: 97%;
height: 80px;
}
</style>
<script>
function Mudarestado(el) {
var display = document.getElementById(el).style.display;
if (display == "none")
document.getElementById(el).style.display = 'block';
else
document.getElementById(el).style.display = 'none';
}
</script>>
20 horas atrás, Omar~ disse:
Primeiro mude isso onClick para isso onclick
O motivo de lançar o documento para o topo é isso:
href="#"
Você diz que o link é uma ancora do início do documento.
Então basta apenas remover o atributo href
No entanto sua função consome muito mais desempenho do que deveria consumir para uma tarefa tão simples.
Veja como pode ficar mais fácil:
<style>
.esconde {display:none}
</style>
<a href="#" data-estado="<?= $cod ?>">Botão 1</a>
<a href="#" data-estado="<?= $cod ?>">Botão 2</a>
<a href="#" data-estado="<?= $cod ?>">Botão 3</a>
<div id="minhaDiv<?= $cod ?>" class="esconde">Div 1</div>
<div id="minhaDiv<?= $cod ?>" class="esconde">Div 2</div>
<div id="minhaDiv<?= $cod ?>" class="esconde">Div 3</div>
<script>
// Obtem a lista dos elemntos clicáveis
document.querySelectorAll('[data-estado]').forEach(function (b) {
b.addEventListener('click', Mudarestado, false); // adiciona um evento click a cada um
});
function Mudarestado(e) {
e.preventDefault(); // Remove o comportamento padrão do navegador para o evento no caso "click"
document.getElementById(
'minhaDiv' + e.target.dataset.estado
).classList.toggle('esconde'); // Remove se tiver ou adiciona se não tiver o classificador "esconde"
}
</script>
Obrigado pela rápida resposta Omar!
Removi a marcação href porem não resolvei o caso.
Não consegui rodar o seu script.>
1 hora atrás, Giovanird disse:
Removi a marcação href porem não resolvei o caso.
Então você tem alguma função javascript que está fazendo o scroll sempre que detecta algum click essa ação é acionada independente de ser uma TAG <a> ou qualquer outra.
Clique com o botão direito do mouse sobre algum link e selecione inspecionar.
No inspetor você pode ver quaisquer eventos anexos ao elemento alvo. Caso não pode ser algum parente dele até chegar ao <body>>
1 hora atrás, Giovanird disse:
Não consegui rodar o seu script.
É na maioria das vezes quando passo algum código aqui no fórum apenas escrevo aqui, então testei esse que lhe apresentei e funcinou como era de se esperar.
Certifique-se que $cod no seu PHP não repete algum valor, caso então terás mais de 1 elemento com o mesmo #ID, aí não vai funcionar mesmo.
>
Em 03/08/2022 at 00:41, Omar~ disse:
Então você tem alguma função javascript que está fazendo o scroll sempre que detecta algum click essa ação é acionada independente de ser uma TAG <a> ou qualquer outra.
Clique com o botão direito do mouse sobre algum link e selecione inspecionar.
No inspetor você pode ver quaisquer eventos anexos ao elemento alvo. Caso não pode ser algum parente dele até chegar ao <body>
É na maioria das vezes quando passo algum código aqui no fórum apenas escrevo aqui, então testei esse que lhe apresentei e funcinou como era de se esperar.
Certifique-se que **$cod** no seu PHP não repete algum valor, caso então terás mais de 1 elemento com o mesmo #ID, aí não vai funcionar mesmo.
Muito obrigado Omar!
Me deu uma luz na questão de ter outro código em conflito. Vou rever o script e volto com o veredito!Experimente esse script meu https://github.com/Spell-Master/sm-web/tree/master/javascript/Accordion
É no contexto do que está tentando fazer.
Basta apenas adicionar a estrutura html do Accordion dentro do laço do foreach
<?php foreach($array as $key => $value) { ?>
<button class="acc-button">Nome do usuário aqui</button>
<div class="acc-container">
Dados ocultos do usuário aqui
</div>
<?php } ?>
Primeiro mude isso onClick para isso onclick
O motivo de lançar o documento para o topo é isso:
href="#"
Você diz que o link é uma ancora do início do documento.
Então basta apenas remover o atributo href
No entanto sua função consome muito mais desempenho do que deveria consumir para uma tarefa tão simples.
Veja como pode ficar mais fácil: