jquery - Getting Mobile Menu to stay open when clicking submenu - Slicknav -

i'm using slicknav: http://slicknav.com/

i have behavior right not quite. want menu close whenever clicks outside of it, got, except enforced that, menu closes when try open submenu. need whole menu stays open when clicking submenu, , closes when clicks outside of menu (anywhere else on page). ideas?

<ul id="menu">  <li><a href="">link</a></li> <li><a href="">link</a></li>  <li> <a href="">submenu</a>  <ul> <li><a href="">submenu link</a></li> <li><a href="">submenu link</a></li> <li><a href="">submenu link</a></li> </ul>  </li>  <li><a href="">link</a></li> <li><a href="">link</a></li>  </ul>   <script src="slicknav.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#menu').slicknav({ label:'', closeonclick:true }); });  /* close menu on outside click*/ $("div, html").on("click", function (event) {  event.stoppropagation(); if(!$(event.target).hasclass("#menu a") &&  !$(event.target).hasclass("ul.slicknav_nav li a") &&  !$(event.target).hasclass("slicknav_menutxt") &&  !$(event.target).hasclass("slicknav_icon") &&  !$(event.target).hasclass("slicknav_icon-bar") && !$(event.target).hasclass("slicknav_btn")) {    $("#menu").slicknav('close');  } }); </script> 

this fixed it:

document.addeventlistener('touchstart', ondocumenttouchstart, false); function ondocumenttouchstart(event) {     if (event.touches[0] && event.touches[0].target.tagname.tolowercase() == "div") {         $("#menu").slicknav('close');     } } 

change click handler to

/* close menu on outside click*/ $("html").on("click", function (event) {     if ($(".slicknav_menu").has(event.target).length === 0)         $("#menu").slicknav('close'); }); 

basically check if target within menu, , don't close if is. if have multiple instances of menu on page, have change selector appropriately.