Jquery - 选择菜单项后需要额外点击 [英] Jquery - Extra click required after selecting menu item
问题描述
我想要做的就是在单击一个项目后隐藏菜单，最终在.toggle（）和.slideToggle（）不过，当我在菜单上进行选择时，它可以正常工作（在浏览器和电话中），除了执行后，我必须在任何地方进行额外的点击就像在其他地方设置焦点一样。
我认为这可能与& ui-state =对话框有关，但是我在pageChange上将changeHash设置为false，并将其从URL中移除，但行为保持不变。
我已经在搜索过去的线程等方面做了最好的工作。任何帮助都将不胜感激：）
< a href =＃hamburgerPopupid =burgerLogodata-rel =popupdata-transition =slidearia-haspopup =truearia-owns =popupMenuaria-expanded =false >
< img src =hamburger.pngstyle =width：50％; />
< / a>
< div data-role =popupid =hamburgerPopupdata-theme =a>
< li data-icon =false>< a href =＃id =calconclick =GoToCalc（）> Calc Weight< / a>< / li>
< li data-icon =false>< a href =＃id =faqonclick =GoToFAQ（）>常见问题解答< / a>< / li>
< / ul>
< / div>
和jquery
（$'$ burgLogo'）。on（'click'，function（）{
$（'＃hamburgerPopup ul'）。css（display，block）;
}）;
函数GoToCalc（）{
$（＃about）。hide（）;
$（＃divCalculator）。show（）;
函数GoToFAQ（）{
$（＃about）。show（）;
$（＃divCalculator）。hide（）;
$（＃hamburgerPopup li）。click（function（）{
$（'＃hamburgerPopup ul'）。css（显示，none）;
// $（＃logo）。click（）; - 我试着模拟点击，什么也不做
// $（'＃hamburgerPopup'） .trigger（click）;
// $（＃hamburgerPopup）。hide（）;
}）
}）;
我相信您需要一个简单的导航页面示例一个汉堡菜单，所以这里是：
$ b
$（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 [ （））; $（[data-role ='header']，[data-role ='' （theme：a，position：fixed，tapToggle：false}）;}）; $（document）.on（pagecontainerchange，function（）{$（[footer' d （'。ui-page-active'）。jqmData（title））;}）; <！c $ c><！DOCTYPE html>< html>< head>< html> < meta charset =utf-8> < meta name =viewportcontent =width = device-width，initial-scale = 1，user-scalable = no> < link rel =stylesheethref =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 =＃hamburgerPopupdata-rel =popupclass =ui-btn-left ui-btn ui-btn -inline ui -mini ui-corner-all ui-btn-icon-left ui-icon -bars ui-btn-icon-notextaria-haspopup =truearia-owns =popupMenuaria-expanded =false>查看< / a> < H2>页眉和LT; / H2> < / DIV> < div data-role =pagedata-title =Calculatorid =page-calculator> < div data-role =content>计算重量< / div> < / DIV> < div data-role =pagedata-title =FAQid =page-faq> < div data-role =content>阅读常见问题< / div> < / DIV> < div data-role =footer> < H2>页脚< / H2> < / DIV> < div data-role =popupid =hamburgerPopupdata-theme =a> < ul data-role =listviewdata-inset =true> < li data-icon =false>< a href =＃page-calculator> Calc Weight< / a>< / li> < li data-icon =false>< a href =＃page-faq>常见问题解答< / a>< / li> < / UL> < / div>< / html>
解释：
页眉，页脚和汉堡包菜单不在所有页面中，因此我们需要手动初始化代码中的小部件。我没有使用数据标签，而是使用了小部件初始化时提供的很多选项，所以我删除了标记中的一些数据标签，因为它们不再是必需的。
页面导航&弹出关闭：已经由jQuery Mobile通过锚标签处理，无需在此处编写JavaScript代码来隐藏弹出窗口，也不需要从一个页面切换到另一个页面。
一些简单的附加功能：
禁用已存在页面的菜单项：这是在Popup beforeposition 通过添加或删除适当的jQM类到建立汉堡菜单的列表视图中。
页面标题：由于标题对所有页面都是通用的，因此我们需要手动设置标题。我在这里使用了一个自定义标签： data-title ：它存储要在页面切换时显示的文本信息。
希望这有助于！
first post here ever after MANY days saved by you guys
I'm developing my first ever mobile app (a type of calculator/converter) using PhoneGap (jquery + html). I'm primarily a .NET dev. with a few years exp.
All I want to do is hide the menu after clicking an item, eventually managed that after .toggle() and .slideToggle() didnt work correctly for me.
HOWEVER ,when I make my selection on the menu, it works correctly (in browser and phonegap) except after execution I have to give an extra click anywhere on the page as if focus is set elsewhere. I thought it may have to do with &ui-state=dialog however I set changeHash to false on pageChange and that removed it from the URL but the behaviour stayed the same.
I've done my best in terms of searching past threads etc. Any assistance will be greatly appreciated :)
<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>
and the 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();
})
});
I believe you need a simple example of navigating pages with a hamburger menu, so here is it:
$(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>
Explanation:
Header, footer and hamburger menu are outside of all the pages, so we need to initialize the widgets by hand, in code. Instead of using data tags, i'm using the many options available at initialization of the widgets, so i removed some of the data tags in markup, as they aren't necessary anymore.
Page navigation & Popup close: is already handled by jQuery Mobile through the anchor tags, no need to write JavaScript code here to hide the popup nor to switching from one page to another.
Some simple additional nice-to have features:
Disabling the menu item of the page where we already are: this is done in Popup beforeposition by adding or removing the proper jQM classes to the listview which builds the hamburger menu.
Page title: as the header is common to all pages, we need to manually set the title. I'm using here a custom tag: data-title: which stores the information of the text to display at page switching.
Hope this helps!
这篇关于Jquery - 选择菜单项后需要额外点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
