JSFiddle - React, Tailwind, and code Playground
HTML
<div class="leftmenu block">
<div class="lalala">
</div>
</div>
<div class="leftmenu block">
<div class="lalala">
</div>
</div>
<div class="leftmenu block">
<div class="lalala">
</div>
</div>
CSS
.leftmenu.block{
margin-top:15px;
width:100px;
height:100px;
background:green;
display:block;
position: relative;
}
.lalala {
display: none;
}
.leftmenu.block.open-block-leftmenu .lalala {
position: absolute;
display: block;
top: 50px;
left: 100%;
width: 100px;
height: 100px;
background: red;
}
JavaScript
(function() {
var menuClicked = false;
$(".leftmenu.block").click(function(){
var $this = $(this);
if ($this.hasClass("open-block-leftmenu")) {
if (menuClicked) {
menuClicked = false;
} else {
$this.removeClass("open-block-leftmenu");
}
} else {
$(".leftmenu.block.open-block-leftmenu").removeClass("open-block-leftmenu");
$this.addClass("open-block-leftmenu");
}
}).on("click", ".lalala", function() {
menuClicked = true;
});
})();