{"id":14796786,"date":"2021-08-23T17:33:40","date_gmt":"2021-08-23T17:33:40","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/maxmenu-js-api-hidepanel-closes-mobile-menu\/"},"modified":"2021-08-23T17:35:52","modified_gmt":"2021-08-23T17:35:52","slug":"maxmenu-js-api-hidepanel-closes-mobile-menu","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/maxmenu-js-api-hidepanel-closes-mobile-menu\/","title":{"rendered":"Maxmenu JS API &#8211; hidePanel() closes mobile menu"},"content":{"rendered":"<p>I&#8217;ve added some javascript to inject a &#8216;close submenu&#8217; button on all menu items for mobile. Those buttons have handlers that fire <code>hidePanel()<\/code>.<\/p>\n<p>Click works perfect. However, any keypress event hides the submenu *and* dismisses the whole mobile menu. Am I doing something wrong?<\/p>\n<pre><code>\n$(document).ready(function() {\n    \/\/ mobile only\n    if (Modernizr.mq(&#039;(max-width: 1129px)&#039;)) {\n      \/\/ get all menu bar top-level links\n      var $lis = $(&#039;#mega-menu-primary&#039;).children(&#039;li.mega-menu-item-has-children&#039;);\n      \/\/ this is the &#039;close submenu&#039; button for accessibility\n      var $closer = $(&#039;&lt;a role=&quot;button&quot; aria-label=&quot;close submenu&quot; href=&quot;#&quot; tabindex=&quot;0&quot; class=&quot;close_submenu&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;X&lt;\/span&gt;&lt;\/a&gt;&#039;);\n\n      $lis.each(function() {\n        var $li = $(this);\n        var $a = $closer.clone();\n        \/\/ inject the &#039;close submenu&#039; button\n        $li.children(&#039;ul.mega-sub-menu&#039;).children(&#039;li&#039;).first().prepend($a);\n        $a.off().on(&#039;click keydown&#039;, function(e) {\n          if (e.type === &#039;click&#039; || e.which == 13) {\n            e.preventDefault();\n            e.stopPropagation(); \/\/ &lt;- this doesn&#039;t help\n            var $submenu = $li.children(&#039;a.mega-menu-link&#039;);\n            \/\/ on click event, this works perfectly.\n            \/\/ on keydown:enter event, this hides the submenu AND dismisses the mobile menu, not what I want :(\n            $(&#039;#mega-menu-primary&#039;).data(&#039;maxmegamenu&#039;).hidePanel($submenu, true);\n          }\n        });\n      });\n    }\n  });\n<\/code><\/pre>\n","protected":false},"template":"","class_list":["post-14796786","topic","type-topic","status-publish","hentry","topic-tag-api"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/14796786","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/14796786\/revisions"}],"predecessor-version":[{"id":14796791,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/14796786\/revisions\/14796791"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=14796786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}