When I focus out of the asmenu class, I attempt to trigger a 'slide up' effect. However, if I select two checkboxes from the child elements within the asmenu class, the focusout event is still triggered.
Ideally, I would like the 'slide up' function to only execute when I focus out after selecting multiple checkboxes within the asmenu class. Currently, if I select one checkbox and then try to select another one, the focusout event is triggered after the first selection.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create_category">
<div class="abmenu">
<em>category</em>
<div class="arrowbox">
<span class="arrow_open"><i class="f0">open</i></span>
<span class="arrow_close"><i class="f0">close</i></span>
</div>
</div>
<div class="asmenu">
<ul>
<li>
<a class="checkaside">
<input type="checkbox" id="asidecate1" name="chk" value="POP">
<label for="asidecate1">POP</label>
</a>
</li>
<li>
<a class="checkaside">
<input type="checkbox" id="asidecate2" name="chk" value="ROCK">
<label for="asidecate2">ROCK</label>
</a>
</li>
<li>
<a class="checkaside">
<input type="checkbox" id="asidecate2" name="chk" value="R&B">
<label for="asidecate2">R&B</label>
</a>
</li>
</ul>
</div>
</div>
$(".create_category .abmenu").on('click', function () {
$(this).next(".asmenu").stop().slideToggle(300);
$(this).toggleClass('on');
});
$(".create_category .asmenu").on('focusout', function (e) {
$(".create_category .asmenu").slideUp(300);
$(".create_category .abmenu").removeClass('on');
});