0

Segue demonstração do que estou tentando fazer..

HTML

<div id="conteudo">   
<div id="inner" class="move">
        <div class="col-md-10"><a class="botao" href="#">botao</a></div>
        <div class="col-md-2">22222</div>
    </div>
</div>

JS

    $( ".botao" ).click(function( {
$( "#inner" ).addClass( "move-left" );
});
    );

CSS

#conteudo{overflow:hidden;width:100%;position;relative;height:200px;}     
#inner{height:200px;width:120%;}
    .move{left:0;position:relative;}
    .move-left{left:-20%;position:relative;background:#000!important}
    .col-md-10{width:80%;position:relative;float:left;}
    .col-md-2{width:20%;position:relative;float:left;}
    .botao{width:100px;height:100px;}

http://jsfiddle.net/35DJy/387/

quero que quando clicar no botado o conteudo do col-md-2 venha para esquerda, e quando clicado fora desse elemento, retire a classe move-left

2 Respostas 2

4

De forma mais explícita, você pode usar o .closest() para modificar quaisquer elemento acima na hierarquia. A vantagem sobre o .parent() é que você não precisa encadear vários .parent() até chegar no elemento desejado, pois o .closest() varre toda a árvore hierárquica recursivamente até chegar no elemento que atende aos critérios informados. Com base na sua questão, o exemplo seria:

Pegando pelo ID:

$( "a.botao" ).click(function() {
   $(this).closest('#inner').addClass( "move-left" );
});

Ou pegando pela classe:

$( "a.botao" ).click(function() {
   $(this).closest('.move').addClass( "move-left" );
});
2

Para acessar o elemento acima na hierarquia você pode usar a função .parent():

$( "a.botao" ).click(function() {
   $( "#inner" ).parent().addClass( "move-left" );
});
#inner
.move{background:none;}
.move-left{background:#000}
.botao{width:100px;height:100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" class="move">
    <a class="botao" href="#">botao</a>
</div>

4
  • Agora como faço para retirar a classe que foi inserida caso o usuario clique em qualquer area da tela que não seja o col-md-2? Commented 14/02/2015 às 22:54
  • @manzetti.denis Que não tenha a classe col-md-2 ou que não esteja contido em um elemento com classe col-md-2? Commented 14/02/2015 às 23:47
  • Atualizei a pergunta, ve se está mais claro... Commented 15/02/2015 às 0:26
  • @manzetti.denis Nesse caso acho melhor você fazer uma nova pergunta. Isso vai mudar basicamente a resposta toda. Commented 15/02/2015 às 0:46

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 .