如何升级 jQuery Mobile Splitview？答案

【问题标题】：How to upgrade jQuery Mobile Splitview?如何升级 jQuery Mobile Splitview？
【发布时间】：2017-05-25 18:26:57
【问题描述】：

我有一个旧的 jQuery Mobile Splitview 应用程序，需要隐藏左侧的菜单。

更新：在 localhost 的 Chrome 视图应用程序中输入检查菜单以查看手机视图：它的登录页面正常，显示的内容和菜单正确折叠。直到我登录或单击菜单进入任何子菜单。菜单不见了，我必须使用手机后退或前进。

我的问题是

如何隐藏左侧菜单（如果还在使用splitview）？
或者有什么可以代替它，因为jQuery Mobile Splitview 5 年没有活动了。似乎已经没有其他人的支持了。

登陆页面的图片在 localhost 视图中通过 Chrome 看起来不错。

但是当上传到 heroku 时，它只显示菜单，直到我们点击主页。

我相信下面是关于这个问题的代码。

!!! 5
%html
  %head
    %meta(name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1")
    = stylesheet_link_tag "application"
    = javascript_include_tag "application"
    = render :partial => "layouts/metatag"
    - if GMAP
      = javascript_include_tag "http://maps.google.com/maps/api/js?sensor=false"
  %body
    = render :partial => "mindapp/menu"
    %div{"data-id" => "main", "data-role" => "panel", "data-backbtn"=>"false"}
      - if @cache
        - cache = {}
      - else
        - cache = {"data-cache"=>"never"}
      - if @backbtn
        - backbtn= {"data-backbtn"=>"true"}
      - else
        - backbtn= {"data-backbtn"=>"false"}
      %div{{"data-role" => "page"}.merge(cache) }
        %div{{"data-role" => "header"}.merge(backbtn)}
          %h1= @title || DEFAULT_TITLE
        %div{"data-role" => "content"}
          = yield
      = render :partial => "mindapp/static"
:javascript
  $(document).on("pagehide", 'div', function(e,ui) {
    var page = $(e.target);
    if(page.attr('data-cache') == 'never') {
      page.remove();
    };
  });
  $( document ).on( "pagechange", function(){
    $.get("/mindapp/ajax_notice", function(r) {$(r).appendTo('head').remove()});
    var meta = $(".content").text();
    if (!meta) {
      meta = "Mindapp Tools to create visual programming using mindmap"
    }
    $('meta[name=description]').attr('content', meta);
  });
/= raw handle_ma_notice

【问题讨论】：

您应该使用面板，其中页面内容是响应式的。 here is a demo
好的，我试试看

标签： jquery jquery-mobile mobile-website splitview

【解决方案1】：

除非我移动它以使其在部分文件中刷新，否则该视口似乎不起作用。在我的情况下，我在 _metatag.html.erb 中有所有元标记，然后工作。

我还有另一个功能需要解决。如何隐藏左侧菜单并使内容 100%。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="robots" content="follow, all" />
  <meta name="language" content="en, th" />
  <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1">

【讨论】：