菜单抽屉在PhoneGap的Android混合应用程序中不起作用

Question

I created a android apk by using phonegap. 我通过使用phonegap创建了一个android apk。 menu drawer is working properly in html code but it is not working in android device. 菜单抽屉在html代码中正常工作，但在android设备中不工作。 when i click on menu icon i dnt get any response. 当我单击菜单图标时，我不会得到任何回应。 so am attaching screenshot of html view 所以要附加html视图的屏幕截图

this the screenshot of html page view but in android menu drawer is not working. 这是html页面视图的屏幕截图，但在android菜单抽屉中不起作用。 html coding is showing below html编码如下所示

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>

<body>
    <div class="container">
        <div id="sidebar">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
          </ul>
        </div>
        <div class="main-content">
          <div class="swipe-area"></div>
          <a href="#" data-toggle=".container" id="sidebar-toggle"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </a>
          <div class="content">
            <h1>Hybrid App</h1>
            <div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>

</div> </div>

 <div class="para">
            <p>Hybrid Mobile Applications. Hybrid development combines the best (or worst) of both the native and HTML5 worlds. We define hybrid as a web app, primarily built using HTML5 and JavaScript, that is then wrapped inside a thin native container that provides access to native platform features.</p>

         </div>

         <div>
           <a href=""><img src="www/screen-iphone-portrait-736h.png\native_html_hybrid_apps_development_1920_700_1.jpg" width="1300" height="700" alt=""></a>
         </div>

        </div>
      </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script> 
      <script>
  $(window).load(function(){
        $("[data-toggle]").click(function() {
          var toggle_el = $(this).data("toggle");
          $(toggle_el).toggleClass("open-sidebar");
        });
         $(".swipe-area").swipe({
              swipeStatus:function(event, phase, direction, distance, duration, fingers)
                  {
                      if (phase=="move" && direction =="right") {
                           $(".container").addClass("open-sidebar");
                           return false;
                      }
                      if (phase=="move" && direction =="left") {
                           $(".container").removeClass("open-sidebar");
                           return false;
                      }
                  }
          }); 
      });
</script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>

</html>

Here is the code so please help me to solve the problem 这是代码，所以请帮助我解决问题

Answer 1

Please register your events like that. 请像这样注册您的活动。

var app = {
    // Application Constructor
    initialize: function () {
        app.bindEvents();
    },
    bindEvents: function () {
        document.addEventListener('deviceready', app.onDeviceReady, false);
    },
    onDeviceReady: function () { 

        capp.bindEvents();

    }
};
var capp = {

    bindEvents: function () {
}
};

you have to register every event because all the events will work after deviceready event.So simply use this structure and define all events in capp. 您必须注册每个事件，因为所有事件都将在deviceready事件之后起作用。因此，只需使用此结构并在capp中定义所有事件。 thanks 谢谢

菜单抽屉在PhoneGap的Android混合应用程序中不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-07-18 15:49:38

菜单抽屉在PhoneGap的Android混合应用程序中不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-07-18 15:49:38

解决方案1
0 已采纳 2016-07-18 15:49:38