0

Tenho uma div que por defeito esta oculta, tenho um jquery simples que quando clico sobre o botão abre a div, só que tenho vários botões com a mesma div oculta.

O que acontece é que se abrir uma div quando vou clicar noutro botão abre a mesma div e ficam todas abertas. O que eu quero é que quando clicado num botão para abrir a div, feche a div que esta actualmente aberta.

Jquery

$(document).ready(function(){
    $("body").on('click', '#botao_ver_opcoes', function(e) {
        var id_jogador_bloqueado = $(this).data("id-jogador");
        $('#opcoes-'+id_jogador_bloqueado+'').toggle();
        event.stopPropagation();
        $(document).click(function(){
            $('#opcoes-'+id_jogador_bloqueado+'').hide();
        });
    });
});

HTML

<div id="show_jogadores" style="width: 150px; height: 30px; border: 1px solid #c2c5cd; text-align: center; line-height: 28px; float: left; border-right: none; cursor: pointer;">
    <p>Escolha uma opção</p>
</div>
<div style="width: 30px; height: 30px; border: 1px solid #c2c5cd; text-align: center; line-height: 28px; float: left; cursor: pointer;">
    <i id="botao_ver_opcoes" data-id-jogador="{{ $deleted_players->id }}" class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div id="opcoes-{{ $deleted_players->id }}" style="width: 180px; margin-top: 30px; background-color: white; border: 1px solid #c2c5cd; z-index: 10; position: absolute; display: none; border-top: none;">
    <div data-toggle="modal" data-target="#modal-add-credito" id="add-credito-btn" data-id-jogador="{{ $deleted_players->id }}" style="text-align: center; line-height: 30px; cursor: pointer;">Transferir Dinheiro</div>
    <div data-toggle="modal" data-target="#modal-update-senha" id="change-pwd-btn" data-id-jogador="{{ $deleted_players->id }}" style="text-align: center; line-height: 30px; cursor: pointer;">Mudar Senha</div>
</div>  

Foreach

<div class="content">
    <div class="table-responsive alt-table">
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th data-sort="int" class="table-check">
                        ID do Jogador
                    </th>
                    <th data-sort="string">
                        Nome do Jogador
                    </th>
                    <th data-sort="string">
                        Data
                    </th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
            @if (count($players_deleted) > 0)
                @foreach($players_deleted as $deleted_players)
                    <tr>
                        <td class="table-check">
                            {{ $deleted_players->id }}
                        </td>
                        <td class="table-check">
                           {{ $deleted_players->username }}
                        </td>
                        <td class="table-check">
                            {{ $deleted_players->created_at }}
                        </td>
                        <td class="table-check">
                            <div id="show_jogadores" style="width: 150px; height: 30px; border: 1px solid #c2c5cd; text-align: center; line-height: 28px; float: left; border-right: none; cursor: pointer;">
                                <p>Escolha uma opção</p>
                            </div>
                            <div style="width: 30px; height: 30px; border: 1px solid #c2c5cd; text-align: center; line-height: 28px; float: left; cursor: pointer;">
                                <i id="botao_ver_opcoes" data-id-jogador="{{ $deleted_players->id }}" class="fa fa-angle-down" aria-hidden="true"></i>
                            </div>
                            <div id="opcoes-{{ $deleted_players->id }}" style="width: 180px; margin-top: 30px; background-color: white; border: 1px solid #c2c5cd; z-index: 10; position: absolute; display: none; border-top: none;">
                                <div data-toggle="modal" data-target="#modal-add-credito" id="add-credito-btn" data-id-jogador="{{ $deleted_players->id }}" style="text-align: center; line-height: 30px; cursor: pointer;">Transferir Dinheiro</div>
                                <div data-toggle="modal" data-target="#modal-update-senha" id="change-pwd-btn" data-id-jogador="{{ $deleted_players->id }}" style="text-align: center; line-height: 30px; cursor: pointer;">Mudar Senha</div>
                            </div>  
                        </td>
                    </tr>
                @endforeach 
            </tbody>
            @else
                <tbody>
                    <tr>
                        <th colspan="4" class="table-check">
                            <div style="text-align: center; color: #000000;">Nenhum Jogador eliminado encontrado</div>
                        </th>
                    </tr>
                </tbody>    
            @endif
        </table>
    </div>
</div>
6
  • Tens somente um ID #botao_ver_opcoes na página ou tens um por cada jogador. Podes mostrar o HTML que é gerado para cada jogador? (se for o que colocaste na pergunta, há um elemento pai desses dois por jogador?)
    – Sergio
    21/04/2017 às 13:29
  • E gerado um foreach em que cada um tem o id #botao_ver_opcoes 21/04/2017 às 13:30
  • Ok, podes mostrar esse forEach? ele tem de ser corrigido.
    – Sergio
    21/04/2017 às 13:32
  • Esta na pergunta 21/04/2017 às 13:34
  • 8
    Eu serei obrigado a insistir na minha antiga sugestão: por favor, utilize pontuações nos seus textos. Elas não são meramerente decorativas, mas, sim, deixam o texto muito mais fácil de ler, pois passa a fazer sentido.
    – Woss
    21/04/2017 às 13:37

1 Resposta 1

2
+50

Segue a função:

  • Ao clicar sobre o botao_ver_opcoes, é recuperado seu atributo data-id-jogador
  • Após, é realizado um each por todas as div com o id opcoes- e executado um hide.
  • Por ultimo é realizado um show para a div correta.

$(document).ready(function(){
    $(".botao_ver_opcoes").on("click", function() {
       var id_jogador_bloqueado = $(this).attr("data-id-jogador");
       $('div[id*="opcoes-"]').each(function(){
          $(this).hide();
       });
       $('#opcoes-'+id_jogador_bloqueado).show();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div>
  <button class="botao_ver_opcoes" data-id-jogador="1">option 1</button>
  <button class="botao_ver_opcoes" data-id-jogador="2">option 2</button>
</div>


<div id="opcoes-1" style="display:none">
    <div data-id-jogador="1" >Transferir Dinheiro 1</div>
    <div data-id-jogador="1" >Mudar Senha 1</div>
</div>  

<div id="opcoes-2" style="display:none">
    <div data-id-jogador="2" >Transferir Dinheiro 2</div>
    <div data-id-jogador="2" >Mudar Senha 2</div>
</div>

3
  • Funciona como eu quero mas por exemplo abro uma janela que tapa o outro botao ele fica sempre aberta como por exemplo resolvo ao clicar fora fechar a janela senao fica sempre aberta 24/04/2017 às 16:51
  • @CésarSousa Buguei aq. Explica melhor se possível.
    – Matheus
    24/04/2017 às 16:53
  • esta a funcionar mas por exemplo abro uma janela ela fica sempre aberta e a div que abre chega a tapar o outro botao para abrir como faco por exemplo pode ser ao clicar novamente no botao fecha 24/04/2017 às 16:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .