单击菜单项后要关闭的jquery移动菜单答案

【问题标题】：jquery mobile menu to close after i click a menu item单击菜单项后要关闭的jquery移动菜单
【发布时间】：2013-06-23 15:11:24
【问题描述】：

基于此演示：http://webdesignerwall.com/demo/mobile-nav/ 这是我的代码。

<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>

我需要的是单击菜单项后“关闭”的菜单，因为它是一个单页网站，我不希望它在单击后保持打开状态。我该怎么做？

非常感谢！

【问题讨论】：

你在用jquery mobile吗？

标签： jquery mobile navigation

【解决方案1】：

添加一个额外的事件来实现它。当单击某些菜单项时，您可以触发#menu-icon 的click：

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

演示：http://jsfiddle.net/hungerpain/RtMNj/2/

【讨论】：

@omegaiori sure np :) 如果您认为这将有助于未来的访问者，请务必也投赞成票 :)
唯一的问题是效果停留在桌面布局中。我这样做 if ( $(window).width()
@bundleofjoy。这个答案真的很有用，但是我们可以拿这个话题聊天吗？

【解决方案2】：

以防万一有人在您使用Primefaces Mobile 和jQuery Mobile 的地方偶然发现这个问题，以下是我能够解决的方法，因为这里接受的解决方案对我不起作用。

基本上我只是放了一个“不可见的”a 标签，它将触发关闭弹出窗口。当用户点击另一个菜单项时，它将执行一个指向那个“不可见”a 标签的 javascript click() 命令。

<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>

【讨论】：

【解决方案3】：

你可以使用$( "#nav" ).panel( "close" );

【讨论】：