jquery-mobile - jQuery 移动面板

Question

我正在尝试添加一个面板以用作侧边菜单，但看起来我做错了什么。我已尝试对其进行故障排除，但看不出问题出在哪里。

默认情况下，面板没有隐藏(不确定它是否应该如此表现)，我无法让它滑出/滑入。

这是我的。感谢您的帮助。

<!-- @ Page = menu -->
<div data-role="page" id="menu">

    <div data-role="panel" id="myPanel" class="main_nav" data-display="push"  data-dismissible="true" data-theme="a">

        <div class="nav_profile">
            <div class="nav_thumb"><img src="images/nav_thumb.png" width="64" /></div>
            <div class="nav_name">
                <h3>user</h3>
                <p>2 active threads</p>
            </div><!--/nav_name-->
        </div><!--/nav_profile-->


    </div><!-- /panel -->

    <div data-role="header" class="header" data-position="fixed" role="banner" >

        <h3>Threads (2)</h3>
        <a href="#" class="right menu_button">New</a>
    </div>

    <div data-role="content">
        <a href="#myPanel" data-rel="panel" data-role="button" class="menu_icon left" ></a>
        <div class="head_search">
            <input type="text" class="search rounded" placeholder="Search" />
        </div>


    </div>

</div><!--/menu-->

Answer 1

它在这里:http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/index.html

A panel's visibility is toggled by a link somewhere on the page or by calling the panel's open method directly. The defaults place the panel on the left and it will be revealed. Open a panel programmatically like this:

$( "#idofpanel" ).panel( "open" , optionsHash );

To control a panel from a link, point the href to references the ID of the panel you want to toggle (mypanel in the example above). This instructs the framework to bind the link to the panel. This link will toggle the visibility of the panel so tapping it will open the panel, and tapping it again will close it.

<a href="#mypanel">Open panel</a>

我将您的代码放入 jsFiddle 中，没有发现任何问题，面板可以正常打开:http://jsfiddle.net/Twisty/Ej7A7/1/

确保您使用的是最新的 JQuery 和 JQM 框架。