在你们保存了许多天之后，这里的第一篇文章
我正在使用 PhoneGap (jquery + html) 开发我的第一个移动应用程序(一种计算器/转换器)。我主要是 .NET 开发人员。经过几年的实验。
我想做的就是在单击一个元素后隐藏菜单，最终在 .toggle() 和 .slideToggle() 对我来说无法正常工作后设法做到这一点。
但是，当我在菜单上进行选择时，它可以正常工作(在浏览器和 phonegap 中)，除非在执行后我必须在页面上的任何地方额外单击一次，就好像焦点设置在其他地方一样。 我认为这可能与 &ui-state=dialog 有关，但是我在 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();
})
});
最佳答案
我相信您需要一个使用汉堡菜单导航页面的简单示例，下面就是它:
$(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"));
});<!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>解释:
页眉、页脚和汉堡菜单位于所有页面之外，因此我们需要在代码中手动初始化小部件。我没有使用数据标签，而是使用了小部件初始化时可用的许多选项，因此我删除了标记中的一些数据标签，因为它们不再是必需的。
Page navigation & Popup close: jQuery Mobile 已经通过 anchor 标签处理了，不需要在这里写 JavaScript 代码来隐藏弹出窗口，也不需要从一个页面切换到另一个页面。
一些简单的附加功能:
禁用我们已有页面的菜单项:这是在 Popup beforeposition 中完成的，方法是向构建汉堡菜单的 ListView 添加或删除适当的 jQM 类。
页面标题:由于页眉是所有页面通用的，我们需要手动设置标题。我在这里使用了一个自定义标签:data-title:它存储了在页面切换时显示的文本信息。
希望这对您有所帮助!
关于javascript - Jquery - 选择菜单项后需要额外点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43217252/