javascript - Unexpected behavior of displaying and hiding a popup menu after resizing a screen or changing screen orientation -

i'm working on menu allows me open , close pop content. menu can opened pressing button, , closed clicking button once more or clicking anywhere else other pop-up content container.

when i'm using code, experiencing weird issue after resizing window or changing screen orientation example on tablet, , clicking menu button, pop-up won't stay opened. opens , hides right after opening.

i cannot duplicate error in jsfiddle made example using same code.

why experiencing issue on demo page? how avoid it? code have sort of limitations i'm not aware of?

this function trowed on click handler on each of buttons.

function mainmenufunction(eid) {     var num = $(eid).attr('id').substr($(eid).attr('id').length - 1);     var elem = $("#menu-content-" + num);     var parent = $("#menu-item-" + num);     var p = parent.position();     var o = parent.offset();      if (elem.css("display") == "none") {         elem.slidedown();     } else {         elem.slideup();     }      $(document).click(function (e) {         // position of menu item         var hstart = o.left;         var hend = o.left + parent.width();         var vstart = o.top;         var vend = o.top + parent.height();          // position of menu container         var chstart = elem.offset().left;         var chend = elem.offset().left + elem.width();         var cvstart = elem.offset().top;         var cvend = elem.offset().top + elem.height();          if (!(((e.clientx >= hstart) && (e.clientx <= hend)) && ((e.clienty >= vstart) && (e.clienty <= vend)))) {             if (!(((e.clientx >= chstart) && (e.clientx <= chend)) && ((e.clienty >= cvstart) && (e.clienty <= cvend)))) {                 elem.slideup();             }         }     }); } 

on jsfiddle code there close menus when user resizes page. mobile , pc menu doesn't mess while switching screens. issue isn't menu closes when resizing window , hiding menu content, after resizing window, clicking menu causes open , closing menu content. content isn't staying open.

$(window).resize(function () {     // pc main menu items     $("#menu-content-1").hide();     $("#menu-content-2").hide(); }); 

what purpose of script. explain please

  if (!(((e.clientx >= hstart) && (e.clientx <= hend)) && ((e.clienty >= vstart) && (e.clienty <= vend)))) {             if (!(((e.clientx >= chstart) && (e.clientx <= chend)) && ((e.clienty >= cvstart) && (e.clienty <= cvend)))) {                 elem.slideup();             }         }