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的 - 選擇菜單項

回答

相關問題