I am trying to implement a mouseup event on a series of divs that, when clicked, will reveal a child div ('menu'). All the parent divs have the same class. Here is an example:
<div class="container">
<div class="menu"><p>Text</p></div>
</div>
<div class="container">
<div class="menu"><p>Text</p></div>
</div>
etc...
However, I want the event to only trigger when the specific 'container' is clicked. When I click on another 'container', I want the previously opened 'menu' to hide while revealing the new one. My current solution involves creating variables for each container and giving them unique classes.
$(document).mouseup (function (e){
var buttonOne = $(".containerOne");
var buttonTwo = $(".containerTwo");
var menuOne = $(".containerOne").find(".menu");
var menuTwo = $(".containerTwo").find(".menu");
if(buttonOne.is(e.target)){
menuOne.toggle(100);
menuTwo.hide();
}
else if(buttonTwo.is(e.target)){
menuTwo.toggle(100);
menuOne.hide();
}
else {
$(".menu").hide();
}
});
Check out this JSFiddle link for a quick demo.
Doing this for multiple containers results in long lines of code, and I believe there must be a simpler way to achieve this. Sorry if my explanation is unclear, it has been a tiring day!