JQuery 移动 - 响应式面板 - 强制面板在更宽的屏幕上保持打开 - 纯 CSS 解决方案

Question

我需要使用纯 CSS 解决方案制作一个响应式面板以在更宽的屏幕上保持打开状态。我创建了一个简短的 jsfiddle：https://jsfiddle.net/ezbdaft4/

在此示例中，菜单按钮将在较宽的屏幕上消失（如果容器已展开）。我需要该面板在更宽的屏幕上也保持打开状态（没有脚本，只有 CSS）。触发器应该是 @media ( min-width: 35em ) {} 但我不知道如何。

Answer 1

我不是专家，但我想我已经解决了问题。我在这里写下解决方案，希望它对其他人有用。

HTML

  <div data-role="panel" id="mypanel" data-display="push" data-theme="b" data-position-fixed="true" data-swipe-close="true" data-position="left">
    <ul data-role="listview">
      <li>Home</li>
      <li>Links</li>
      <li>Exit</li>
    </ul>
  </div>

  <div data-role="header" data-position="fixed" data-tap-toggle="false">
    <a href="#mypanel" data-icon="bars" data-iconpos="notext" class="hide-on-large-screen">menu</a>
    <h1>My App</h1>
  </div>

  <div role="main" class="ui-content" id="mycontent">
    <p>expand this container</p>
  </div>
</div>

CSS

@media ( min-width: 55em) {
  .ui-responsive-panel > .ui-header,
  .ui-responsive-panel > .ui-footer,
  .ui-responsive-panel > .ui-panel-wrapper {
    left: 17em;
    right: -17em;
    width: auto;
    margin-right: 17em;
    margin-left: 1px;
  }
  .ui-panel-animate.ui-panel-page-content-position-left {
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
  }
  .ui-responsive-panel .ui-panel-animate {
    -webkit-transition: none;
    -webkit-transition-duration: 0s;
    -moz-transition: none;
    transition: none;
  }
  .ui-responsive-panel .ui-panel-closed {
    width: 17em;
    visibility: visible;
    clip: auto;
  }
  .ui-responsive-panel .ui-panel {
    margin-right: 0;
  }
  .ui-responsive-panel .ui-panel-animate.ui-panel-position-left.ui-panel-display-push {
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
  }
  .hide-on-large-screen {
    visibility: hidden;
  }
}

JQuery 移动 - 响应式面板 - 强制面板在更宽的屏幕上保持打开 - 纯 CSS 解决方案

JQuery Mobile - Responsive Panel - force panel to stay open on wider screens - pure CSS solution

jquery-mobile

responsive-design