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
?