Question

在你们保存了很多天之后，第一次在这里发帖

我正在使用PhoneGap（jquery + html）开发我的第一个移动应用程序（一种计算器/转换器）。我主要是.NET开发者。有几年的exp。

我想要做的就是在点击一个项目之后隐藏菜单，最终在.toggle（）和.slideToggle（）之后管理它对我来说无法正常工作。

但是，当我在菜单上进行选择时，它可以正常工作（在浏览器和手机屏幕中），除了执行后我必须在页面的任何位置给予额外的点击，就像在其他地方设置焦点一样。我认为这可能与＆amp; ui-state =对话有关但是我在pageChange上将changeHash设置为false并将其从URL中删除但行为保持不变。

我在搜索过去的帖子等方面做得最好。任何帮助将不胜感激：）

 <a href="#hamburgerPopup" id="burgerLogo" data-rel="popup" data-transition="slide" aria-haspopup="true" aria-owns="popupMenu" aria-expanded="false">
                    <img src="hamburger.png" style="width:50%;" />
                </a>
                <div data-role="popup" id="hamburgerPopup" data-theme="a" >
                    <ul data-role="listview" data-inset="true">
                        <li data-icon="false"><a href="#" id="calc" onclick="GoToCalc()">Calc Weight</a></li>
                        <li data-icon="false"><a href="#" id="faq" onclick="GoToFAQ()">FAQ's</a></li>
                    </ul>
                </div>

和jquery

    $('#burgerLogo').on('click', function () {
        $('#hamburgerPopup ul').css("display", "block");
    });

    function GoToCalc() {
        $("#about").hide();
        $("#divCalculator").show();
    }

    function GoToFAQ() {
        $("#about").show();
        $("#divCalculator").hide();
    }
$(function () {
        $("#hamburgerPopup li").click(function () {
            $('#hamburgerPopup ul').css("display", "none");
            //$("#logo").click(); - I tried this to simulate a click, does nothing
            //$('#hamburgerPopup').trigger("click");
            //$("#hamburgerPopup").hide();
        })
    });

Answer 1

我相信你需要一个用汉堡包菜单导航页面的简单例子，所以这就是：

＆＃13;

$(function(){
  $( "#hamburgerPopup" ).enhanceWithin().popup({
    theme: "a",
    transition: "turn",
    history: false,
    positionTo: "origin",
    beforeposition: function( event, ui ) {
      var currPageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
      $("#hamburgerPopup li").removeClass("ui-state-disabled");
      $("#hamburgerPopup a[href='#"+currPageId+"']").parent().addClass("ui-state-disabled");
    }
  });
  $("[data-role='header'], [data-role='footer']").toolbar({
    theme: "a",
    position: "fixed",
    tapToggle: false
   });
});

$(document).on("pagecontainerchange", function() {
  $("[data-role='header'] h2" ).text($(".ui-page-active").jqmData("title"));
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div data-role="header">
    <a href="#hamburgerPopup" data-rel="popup" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-bars ui-btn-icon-notext" aria-haspopup="true" aria-owns="popupMenu" aria-expanded="false">View</a>
    <h2>Header</h2>
  </div>
  <div data-role="page" data-title="Calculator" id="page-calculator">
    <div data-role="content">
      Calculate Weight
    </div>
  </div>
  <div data-role="page" data-title="FAQ" id="page-faq">
    <div data-role="content">
      Read FAQ
    </div>
  </div>
  <div data-role="footer">
    <h2>Footer</h2>
  </div>
  <div data-role="popup" id="hamburgerPopup" data-theme="a">
      <ul data-role="listview" data-inset="true">
          <li data-icon="false"><a href="#page-calculator">Calc Weight</a></li>
          <li data-icon="false"><a href="#page-faq">FAQ's</a></li>
      </ul>
  </div>
</body>
</html>

＆＃13;

说明：

页眉，页脚和汉堡菜单位于所有页面之外，因此我们需要在代码中手动初始化小部件。我没有使用数据标签，而是使用小部件初始化时可用的许多选项，因此我删除了标记中的一些数据标记，因为它们不再是必需的。

页面导航＆amp;弹出关闭：已经由jQuery Mobile通过锚标签处理，无需在此处编写JavaScript代码来隐藏弹出窗口，也无需从一个页面切换到另一个页面。

一些简单的附加功能：

禁用我们已经存在的页面的菜单项：这是在Popup beforeposition中完成的，方法是在构建汉堡包菜单的listview中添加或删除正确的jQM类。

页面标题：由于标题对所有页面都是通用的，我们需要手动设置标题。我在这里使用了一个自定义标记：data-title：它存储了在页面切换时显示的文本信息。

希望这有帮助！

Jquery - 选择菜单项后需要额外点击

1 个答案: