4

Tenho um menu que, ao clicar com o botão direito, ele se abre em uma DIV. Tudo ocorre dentro de uma tr (linha) de uma table.

Meu problema é o seguinte, tenho uma table com várias tr, e cada umas delas recebem uma ID. E tenho também, várias div sendo que cada uma delas recebe uma ID igual ao da tr. Preciso que o javascript abra a DIV com o mesmo ID da TR.

Exemplo:

Ao clicar com botão direito na tr id="1" a div class="menu_pai" id="1" se abre.

Código atual:

document.oncontextmenu = function () {
        return false;
    };

    $("tr").mousedown(function (e) {
        
        // Define a posição do menu
        $('.menu_pai').css({
            "margin-left": e.clientX,
            "margin-top": e.clientY
        }).show();
        
        // Exibe o menu
        if (e.button === 2) {
            $(".menu_pai").show(); 
        } else {
            $(".menu_pai").hide();
        }
    });
.menu_pai{
        display: none;
    }
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<table width="100%" border="1" >
    <tr  id="1">
        <td>ID:1</td>
        <td>Nome</td>
        <td>Idade</td>
    </tr>
    <tr id="2">
        <td>ID:2</td>
        <td>Nome</td>
        <td>Idade</td>
    </tr>
    <tr id="3">
        <td>ID:3</td>
        <td>Nome</td>
        <td>Idade</td>
    </tr>
</table>

<div class="menu_pai" id="1">
    <div class="menu">
      link 1
    </div>
</div>

<div class="menu_pai" id="2">
    <div class="menu">
        link 2
    </div>
</div>

<div class="menu_pai" id="3">
    <div class="menu">
        link 3
    </div>
</div>

3
  • Tem palavra faltando nessa tua pergunta "Tenho uma tabela com várias ," ; "recebe uma ID igual ao da .". Dá uma arrumada porque eu não consegui entender nada do que tu quer.
    – DH.
    Commented 13/04/2016 às 12:09
  • Foi porque eu usei tags hahaha, prontinho Commented 13/04/2016 às 12:14
  • troque a palavra de java para javascript por favor Commented 13/04/2016 às 12:19

1 Resposta 1

6

Primeiro não é aconselhado ter id iguais, os id’s deverão ser únicos. Somente class permite ter tags com class iguais.
Portanto o primeiro passo alterei os id’s nas divs de menu.
Por exemplo.:

De 1 para menu1.

Na altura de mostrar o objeto coloquei dinâmico a escolha do objeto, assim para mostrar apenas o id pretendido.

$("#menu"+this.id).show();

Onde o this é o tr portanto this.id será o id do tr.
Após isso é necessário esconder todos os menus menos o menu que acabamos escolher.

$(".menu_pai:not(#menu"+this.id+")").hide();

Espero que esteja claro as mudanças que efetuei.
O jsfiddle que criei.:
http://jsfiddle.net/q6jGr/171/

Com o exemplo dado para desaparecer com o mouse.:
http://jsfiddle.net/q6jGr/178/

Com o exemplo de mudar a cor.:
http://jsfiddle.net/q6jGr/181/
Criada a class selecionado para o efeito.

Firefox.:
Consegui replicar o constragimento dos clicks mas está acontecer porque a console do browser está ligado, se fechar o console já não acontece. (Pelo menos só consegui ter esse constragimento nesse caso). Encontrei outro constragimento que estava a fechar o menu quando não devia.
Corrigido.:
http://jsfiddle.net/q6jGr/192/
O que estava acontecer é o evento que tem propriedades diferentes em vez de toElement fica relatedTarget.

7
  • perfeito amigo, muito obrigado :) Commented 13/04/2016 às 12:23
  • tem como fazer o menu fechar quando o mouse não estiver sobre ele? jsfiddle.net/q6jGr/172 Commented 13/04/2016 às 13:13
  • 1
    @Hugo Borges ai está o exemplo :D Commented 13/04/2016 às 14:43
  • Muito bom. ;) so mais uma coisa agora e a última, e possível colocar um background na <tr> ao ficar com o botão direito? assim fica fácil saber em qual linha o menu foi aberto. Commented 13/04/2016 às 16:40
  • amigo detectei um problema com o firefox, será que por eme ajudar? O erro e que tem que clicar duas vezes com botão direito do mouse. jsfiddle.net/q6jGr/185 Commented 13/04/2016 às 20:16

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 .