jQuery的 - 选择菜单项

我正在开发使用PhoneGap的（我的第一次移动应用程序（一式计算器/转换器）的jQuery + HTML保存许多天之后从那以后需要额外的点击）。我主要是一个.NET开发人员。用了几年的时间。

所有我想要做的就是隐藏菜单单击某个项目之后，最终管理，经过正确.toggle（）和.slideToggle（）没有工作对我来说。然而，当我在菜单上进行选择时，它可以正常工作（在浏览器和phonegap中），除非在执行后，我必须在页面上的任何地方额外点击一次，就好像焦点设置在别处一样。我认为这可能与& UI状态=对话框做，但是我设置changeHash为false pageChange和从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(); 
     }) 
    });

来源

2017-04-04 aquadementia

这是在iOS或Android？已知iOS用悬停而不是实际点击来做时髦的事情。如果这是在Android上，这个问题可能是我没有处理的东西，因为Android通常会像魅力一样工作。 –

这可能是臭名昭著的iOS的错误：“：指针光标”在问题您可以点击添加元素。 –

对不起，我应该更清楚 - 这种行为是在浏览器（铬）使用jQuery的移动。我基本上是将我的网站功能重新创建到应用程序中。谷歌分析将我的受众中的大约80％作为Android用户（典型的南非）。我甚至还没有在IOS上进行测试 – aquadementia

搜索过去的线程方面，我相信你需要一个简单的例子用汉堡菜单浏览页面，所以这里是：

$(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>

说明：

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

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

一些简单的附加不错，有特点：

禁用页面菜单项，我们已经是：这是在弹出beforeposition进行添加或删除适当JQM类中分别建立了汉堡包列表视图菜单。

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

希望这会有所帮助！

来源

2017-04-07 15:30:44 deblocker

jQuery的 - 选择菜单项

回答

相关问题