JQuery mobile menu to close after I click a menu item

Question

based on this demo: http://webdesignerwall.com/demo/mobile-nav/ this is my code.

<script type="text/javascript"> jQuery(document).ready(function($){ /* prepend menu icon */ $('#nav-wrap').prepend('<div id="menu-icon"><img id="logo" src="<?php echo site_url(); ?>/wp-content/themes/blue-and-grey/images/mobileimages/hme_btn.png" /></div>'); /* toggle nav */ $("#menu-icon").on("click", function(){ $("#nav").slideToggle(); $(this).toggleClass("active"); }); }); </script> 

I need the menu to “close” after I click on the menu item, because this is a single page website, and I don't want it to stay open after I click. how am i doing this

Thank you very much!

Answer 1

Add an extra event to make this happen. You can call click #menu-icon when any menu item is clicked:

  $("#nav").on("click", "li", function () { $("#menu-icon").click(); //or $("#nav").slideToggle(); }); 

Demo: http://jsfiddle.net/hungerpain/RtMNj/2/

Answer 2

Just in case, someone stumbles upon this question, where do you use Primefaces Mobile with jQuery Mobile , here is how I was able to make a workaround, since the decision made here did not work for me.

Basically, I just put the "invisible" tag a , which will trigger the closing of the popup. When the user clicks on another menu item, he executes the javascript click() command aimed at this "invisible" tag a .

 <ul data-role="listview" data-theme="c" data-divider-theme="a"> <li data-role="list-divider">Menu</li> <li data-icon="user"> <p:commandLink id="show-member-menu" styleClass="bordercolorddd" value="Members" data-rel="back" onclick="$('#closer').click();" action="#{editROrgUnit.initializeSubordinateList}" update=":main:subordlist" process=":main:subordlist"/> </li> <li class="separator"><p:separator/><a id="closer" href="#" class="closerclass ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back"/></li> <li data-icon="power"> <p:commandLink value="Logout" action="#{loginBean.logout}" styleClass="bordercolorddd" ajax="true" partialSubmit="true" process="@this" /> </li> </ul> 

Answer 3

you can use $( "#nav" ).panel( "close" );