javascript Função mostra div dando scrool na tela

[Giovanird 0]

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
foreach para listar os usuários....
?>
<div class="col-10">
Nome do usuário
</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>

 

[Omar~ 87]

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>

 

[Giovanird 0]

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.

[Omar~ 87]

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.

[Giovanird 0]

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!

[Omar~ 87]

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 } ?>