5

このデモに基づいています: 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>

必要なのは、メニュー項目をクリックした後に「閉じる」メニューです。これは単一ページの Web サイトであり、クリックした後に開いたままにしたくないためです。それ、どうやったら出来るの？

どうもありがとうございます！

4

3 に答える 3

4

それを実現するためのイベントを追加します。一部のメニュー項目がクリックされたときにclickトリガーできます。#menu-icon

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

デモ: http://jsfiddle.net/hungerpain/RtMNj/2/

于 2013-06-23T17:35:51.907 に答える
0

Primefaces Mobileと一緒に使用している場合に誰かがこの質問に出くわした場合に備えてjQuery Mobile、ここで受け入れられた解決策がうまくいかなかったので、回避策を作成する方法を次に示します。

a基本的に、ポップアップを閉じるトリガーとなる「見えない」タグを付けただけです。ユーザーが他のメニュー項目をクリックすると、click()その「見えない」aタグに向けられた JavaScript コマンドが実行されます。

<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>
于 2015-05-06T11:15:45.133 に答える