Question

我试图使用cordova使我的网站混合。

它有一个侧边栏，在浏览器版本上运行得很好，但是当我在Android上构建并运行它时它不起作用，我点击“汉堡包”按钮但没有任何反应。

的index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="./css/bootstrap.min.css" >
    <link rel="stylesheet" href="./css/orlando.css" >
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content=" Pagina Inicial ">
  </head>

<body>

<div id="wrapper">
    <!-- Sidebar -->
    <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
        <ul class="nav sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                   <img src="./img/logo2.png" alt="">
                </a>
            </li>
            <li>
                <a href="index.php">Login</a>
            </li>
            <li>
                <a href="register.html">Register</a>
            </li>
            <li>
                <a href="about.html">About</a>
            </li>
            <li>
                <a href="profile.html">Profile</a>
            </li>
            <li>
                <a href="matchhistory.html">Match History</a>
            </li>
            <li>
                <a href="leaderboard.html">Leaderboard</a>
            </li>
            <li>
                <a href="contacts.html">Contacts</a>
            </li>
            <li>
                 <a href="./php/logout.php">Logout</a>
            </li>
        </ul>
    </nav>

    <!-- Page Content -->
    <div id="page-content-wrapper">
          <nav class="navbar navbar-default navbar-static-top">

            <div class="container" style="width: 100%;">
              <button type="button" class="hamburger is-closed" data-toggle="offcanvas">
                  <span class="hamb-top"></span>
            <span class="hamb-middle"></span>
          <span class="hamb-bottom"></span>
              </button>
              <div class="navbar-header">
                  <a class="navbar-brand" href="./index.html"target="_self" style="margin-left: 55px;"> <img src="./img/logo.png" alt=""></a>
             </div>
            </div>
          </nav>

          <form class="form-signin" action="index.php" method="post">
            <h2 class="form-signin-heading">Please login</h2>
            <input type="text" class="form-control" name="email" placeholder="Username" required="" autofocus="" />
            <input type="password" class="form-control" name="password" placeholder="Password" required=""/>
            <label class="checkbox">
              <input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember me
            </label>
            <button class="btn btn-lg btn-primary btn-block" name="login" type="submit">Login</button>
          </form>


    <!-- /#page-content-wrapper -->
  </div>
</div>

<!-- /#wrapper -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/master.js"></script>
</html>

master.js（菜单脚本）：

$(document).ready(function () {
    var trigger = $('.hamburger'),
        overlay = $('.overlay'),
        isClosed = false;

    trigger.click(function () {
        hamburger_cross();
    });

    function hamburger_cross() {
        if (isClosed == true) {
            overlay.hide();
            trigger.removeClass('is-open');
            trigger.addClass('is-closed');
            isClosed = false;
        } else {
            overlay.show();
            trigger.removeClass('is-closed');
            trigger.addClass('is-open');
            isClosed = true;
        }
    }

    $('[data-toggle="offcanvas"]').click(function () {
        $('#wrapper').toggleClass('toggled');
    });
});

Answer 1

尝试编译您的应用程序，只使用本地资源，下载jQuery并添加到您的文件夹js，此外还添加以下行：

 <script src="../cordova.js"></script>

要确保应用的功能，请检查cordova.js文件是否存在。

使用Apache Cordova时，补充工具栏js脚本无法在Android版本上运行

1 个答案: