1

Recentemente criei este documento HTML:

<div class="wrap">
<div class="container">
    <a class="button" href="#" title="Abrir as opções."></a>
    <div class="option-box">
        <ul>
            <li><a href="#">Ação 1</a></li>
            <li><a href="#">Ação 2</a></li>
            <li><a href="#">Ação 3</a></li>
            <li><a href="#">Ação 4</a></li>
        </ul>
    </div>
</div>
<div class="container">
    <a class="button" href="#" title="Abrir as opções."></a>
    <div class="option-box">
        <ul>
            <li><a href="#">Ação 1</a></li>
            <li><a href="#">Ação 2</a></li>
            <li><a href="#">Ação 3</a></li>
            <li><a href="#">Ação 4</a></li>
        </ul>
    </div>
</div>

Tenho dois blocos .container, que já está formatado no CSS, tenho em cada container um elemento a que adicionará uma classe à div .option-box, o problema surge quando clico em apenas um elemento a e o jQuery adiciona as classes para o .option-box do outro .container, fazendo com que apareça dois menus.

Javascripts abaixo:

$(function optionbox() {
  var box = $('.container .option-box');
  var button = $('.container a.button');
  button.on('click', function optionbox(){
    box.toggleClass('show');
  });
});

Como fazer com que o jQuery manipule o elemento de apenas um .container?

1 Resposta 1

2

Vai ter que partir do elemento clicado e "procurar" no DOM para encontrar o elemento que quer.

Usando o .closest() pode subir no DOM a partir do elemento clicado e depois o .find() para descer para o elemento que quer.

Exemplo:

$(function optionbox() {
    var box = $('.container .option-box');
    var button = $('.container a.button');
    button.on('click', function optionbox() {
        $(this).closest('.container').find('.option-box').toggleClass('show');
    });
});

jsFiddle: http://jsfiddle.net/cs6erreu/

Como o @Jader sugeriu, uma variante mais simples seria somente

$(this).siblings('.option-box').toggleClass('show');

Isto porque o <div class="option-box"> é sibling do .button.

Outra variante ainda é usar o .next()

$(this).next().toggleClass('show');

Exemplo: http://jsfiddle.net/cs6erreu/1/

3
  • 1
    Funcionou, muito obrigado pela ajuda!
    – inodaf
    Commented 15/10/2014 às 19:22
  • @IsacFadoni juntei mais duas opções. Se o seu HTML fôr como no exemplo elas são até melhores...
    – Sergio
    Commented 15/10/2014 às 19:34
  • 1
    Testei as outras soluções também, e funcionou perfeitamente.Novamente muito obrigado.
    – inodaf
    Commented 15/10/2014 às 19:37

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 .