closing dropdown mobile menu after opening and loading a menu items

Question

I am using the foundation off-canvas menu with dropdown. Some of the items menus are not clickable but showing their submenus using this function:

$('.page-item-1765 > a, .page-item-1761 > a').click(function(e){
    $(this).parent().children('ul.children').slideToggle();
    e.preventDefault();
});

This works perfectly. But what I need is to have other items menu clickable, showing their submenus stayed on the dropdown opened and be able to close the dropdown afterwards by clicking a second time on the items menus. I tried this but it doesn't work:

$('.page-item-12 > a').on('open').click(function(){
    $(this).parent().children('ul.children').slideToggle();
});

I also tried:

 $('.page-item-12 > a').on('close').click(function(){
    $(this).parent().children('ul.children').slideDown();
});

$('.page-item-12 > a').on('open').click(function(){
    $(this).parent().children('ul.children').slideUp();
});

But still doesn't work. Someone can help me on this?

Answer 1

try

$('.page-item-12 > a').on('click', function () {
  if ($(this).css('display') == 'none') {
    // your menu is closed
  } else {
    // your menu is opened
  }
});