Question

我想为手机和平板电脑创建一个移动页面。当用户使用平板电脑（大屏幕）时，左侧面板导航应始终保持打开状态。当用户使用移动电话（较小的屏幕）时，左上角应该只有一个按钮来打开面板。

Jquery有一个演示，但显然它不起作用： http://demos.jquerymobile.com/1.4.5/panel-responsive/

我在JSfiddle上尝试了这个演示，但它也没有用：

    <div data-role="page" class="jqm-demos ui-responsive-panel" id="panel-responsive-page1" data-title="Panel responsive page">

    <div data-role="header">
        <h1>Panel responsive</h1>
        <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
        <a href="#add-form" data-icon="gear" data-iconpos="notext">Add</a>
    </div><!-- /header -->

    <div role="main" class="ui-content jqm-content jqm-fullwidth">

        <h1>Panel responsive</h1>

        <p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the push display mode, the right panel reveal. To make this responsive, you can make the page re-flow at wider widths. This allows both the panel menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the <code>class="ui-responsive-panel"</code> to the page container. We have added this class on this demo page. Note that when using the preset class, we also hide the dismiss layer on wider screens if the panel has the push display mode.</p>

        <div data-demo-html="#panel-responsive-page1"></div><!--/demo-html -->

        <br>
        <br>
        <br>
        <br>
        <br>

        <a href="../" data-rel="back" data-ajax="false" class="ui-btn ui-shadow ui-corner-all ui-mini ui-btn-inline ui-icon-carat-l ui-btn-icon-left ui-alt-icon ui-nodisc-icon">Back</a>

    </div><!-- /content -->

    <div data-role="panel" data-display="push" data-theme="b" id="nav-panel">

        <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                <li><a href="#panel-responsive-page2">Accordion</a></li>
                <li><a href="#panel-responsive-page2">Ajax Navigation</a></li>
                <li><a href="#panel-responsive-page2">Autocomplete</a></li>
                <li><a href="#panel-responsive-page2">Buttons</a></li>
                <li><a href="#panel-responsive-page2">Checkboxes</a></li>
                <li><a href="#panel-responsive-page2">Collapsibles</a></li>
                <li><a href="#panel-responsive-page2">Controlgroup</a></li>
                <li><a href="#panel-responsive-page2">Dialogs</a></li>
                <li><a href="#panel-responsive-page2">Fixed toolbars</a></li>
                <li><a href="#panel-responsive-page2">Flip switch toggle</a></li>
                <li><a href="#panel-responsive-page2">Footer toolbar</a></li>
                <li><a href="#panel-responsive-page2">Form elements</a></li>
                <li><a href="#panel-responsive-page2">Grids</a></li>
                <li><a href="#panel-responsive-page2">Header toolbar</a></li>
                <li><a href="#panel-responsive-page2">Icons</a></li>
                <li><a href="#panel-responsive-page2">Links</a></li>
                <li><a href="#panel-responsive-page2">Listviews</a></li>
                <li><a href="#panel-responsive-page2">Loader overlay</a></li>
                <li><a href="#panel-responsive-page2">Navbar</a></li>
                <li><a href="#panel-responsive-page2">Navbar, persistent</a></li>
                <li><a href="#panel-responsive-page2">Pages</a></li>
                <li><a href="#panel-responsive-page2">New</a></li>
                <li><a href="#panel-responsive-page2">Popup</a></li>
                <li><a href="#panel-responsive-page2">Radio buttons</a></li>
                <li><a href="#panel-responsive-page2">Select</a></li>
                <li><a href="#panel-responsive-page2">Slider, single</a></li>
                <li><a href="#panel-responsive-page2">New</a></li>
                <li><a href="#panel-responsive-page2">New</a></li>
                <li><a href="#panel-responsive-page2">New</a></li>
                <li><a href="#panel-responsive-page2">Text inputs & textarea</a></li>
                <li><a href="#panel-responsive-page2">Transitions</a></li>
        </ul>

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

    <div data-role="panel" data-position="right" data-display="reveal" data-theme="a" id="add-form">

        <form class="userform">

            <h2>Login</h2>

            <label for="name">Username:</label>
            <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">

            <label for="password">Password:</label>
            <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">

            <div class="ui-grid-a">
                <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a></div>
                <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini">Save</a></div>
            </div>
        </form>

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

</div><!-- /page -->

<div data-role="page" id="panel-responsive-page2">

    <div data-role="header">
        <h1>Landing page</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content jqm-content">

        <p>This is just a landing page.</p>

        <a href="#panel-responsive-page1" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-mini ui-icon-back ui-btn-icon-left">Back</a>

    </div><!-- /content -->

</div><!-- /page -->

http://jsfiddle.net/84m0b2au/

我搜索了很长时间，发现了一个半工作的JS解决方案，但是当我更改页面时，面板不会保持打开状态，只有当我重新加载页面时。我发现了一些类似的问题，很明显这是一个问题，但没有一个（对我而言）工作解决方案。

所以我的问题是，我该如何解决这个问题。最好的方法是找到一个仅限CSS的解决方案。

非常感谢您的提示。

强制面板在jQuery Mobile中在更宽的屏幕上保持打开状态

0 个答案: