I want to do 'slide up' when the 'slide menu' is focused out-CodePudding

I try to 'slide up' when I focus out of the asmenu class. However, if you select two (2) checkboxes of child element in the asmenu class, the focusout is executed.

Basically, once you select one (1) checkbox of child element in the asmenu class, 'slide up' function is already ready to executed. So that when I try to select the 2nd one after I select the 1st one, it automatically focus out. I would like to select multiple checkboxes and only 'slide up' when I focus out of the asmenu class.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <em>category</em>
    <div >
      <span ><i >open</i></span>
      <span ><i >close</i></span>
    </div>
  </div>
  <div >
    <ul>
      <li>
        <a >
          <input type="checkbox" id="asidecate1" name="chk" value="POP">
          <label for="asidecate1">POP</label>
        </a>
      </li>
      <li>
        <a >
          <input type="checkbox" id="asidecate2" name="chk" value="ROCK">
          <label for="asidecate2">ROCK</label>
        </a>
      </li>
      <li>
        <a >
          <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');
});

CodePudding user response：

Just use the below code and remove yours it works perfectly. I have used stopPropagation this method prevents the propagation of the same event from being called

Also when you click on the document ".asmenu" will focus out.

  $(".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');
     }); */

    $(document).on("click", function () {
        $(".create_category .asmenu").slideUp(300);
        $(".create_category .abmenu").removeClass('on');
    });

    $('.create_category').on('click', function (e) {
        e.stopPropagation();
    });