Jquery - Extra click required after selecting menu item

问题

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();
        })
    });

回答1:

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!

来源：https://stackoverflow.com/questions/43217252/jquery-extra-click-required-after-selecting-menu-item

标签

javascript

jquery

html

css

jquery-mobile