我正在使用Angular，Bootstrap和模板化Ace Admin（响应模板）开发Web应用程序。在PC上，在Chrome和FireFox中一切正常。当我们缩小窗口或使用响应式设计审阅时，侧边栏导航会更改为菜单按钮并正常工作。但是，当我们将网站放在桌面或手机（Chrome或Firefox浏览器）上时，菜单按钮可见，但不响应。有任何想法吗？这是我的开放HTML页面，我唯一不用的是我的应用程序的javascript。剩下的就在这里。
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/favicon.ico">
<title>DISCUS Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="resources/ace/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/ace/assets/css/font-awesome.min.css">
<!-- page specific plugin styles -->
<link rel="stylesheet" href="resources/ace/assets/css/jquery-ui.min.css">
<link rel="stylesheet" href="resources/ace/assets/css/datepicker.css">
<link rel="stylesheet" href="resources/ace/assets/css/ui.jqgrid.css">
<!-- text fonts -->
<link rel="stylesheet" href="resources/ace/assets/css/ace-fonts.css">
<!-- ace styles -->
<link rel="stylesheet" href="resources/ace/assets/css/ace.min.css" id="main-ace-style">
<!-- ngModal styles -->
<link rel="stylesheet" href="resources/ng-modal/ng-modal.css">
<!-- TEST DRIVE STYLES (Determine to keep or throw away) -->
<link rel="stylesheet" href="resources/ng-grid/ng-grid.css">
<!-- DSC styles -->
<link rel="stylesheet" href="styles/ng-style.css">
<!--[if lte IE 9]>
<link rel="stylesheet" href="resources/ace/assets/css/ace-part2.min.css">
<![endif]-->
<link rel="stylesheet" href="resources/ace/assets/css/ace-skins.min.css">
<link rel="stylesheet" href="resources/ace/assets/css/ace-rtl.min.css">
<!--[if lte IE 9]>
<link rel="stylesheet" href="resources/ace/assets/css/ace-ie.min.css">
<![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="resources/ace/assets/js/ace-extra.min.js"></script>
<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="resources/ace/assets/js/html5shiv.min.js"></script>
<script src="resources/ace/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<!--<body class="no-skin">-->
<body class="skin-1" data-ng-controller="MainController">
<ng-include src="'views/navbar.html'"></ng-include>
<div class="main-container" id="main-container">
<div id="sidebar" class="sidebar responsive" data-ng-show="user">
<script type="text/javascript">
try {
ace.settings.check('sidebar', 'fixed')
}
catch (e) {
}
</script>
<div class="sidebar-shortcuts" id="sidebar-shortcuts">
<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
<button class="btn btn-success">
<i class="ace-icon fa fa-signal"></i>
</button>
<button class="btn btn-info">
<i class="ace-icon fa fa-pencil"></i>
</button>
<!-- #section:basics/sidebar.layout.shortcuts -->
<button class="btn btn-warning">
<i class="ace-icon fa fa-users"></i>
</button>
<button class="btn btn-danger">
<i class="ace-icon fa fa-cogs"></i>
</button>
<!-- /section:basics/sidebar.layout.shortcuts -->
</div>
<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
<span class="btn btn-success"></span>
<span class="btn btn-info"></span>
<span class="btn btn-warning"></span>
<span class="btn btn-danger"></span>
</div>
</div>
<!-- /.sidebar-shortcuts -->
<div ng-include src="'views/sidebar.html'"></div>
<!-- #section:basics/sidebar.layout.minimize -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i class="ace-icon fa fa-angle-double-left" data-icon1="ace-icon fa fa-angle-double-left"
data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
<!-- /section:basics/sidebar.layout.minimize -->
<script type="text/javascript">
try {
ace.settings.check('sidebar', 'collapsed')
}
catch (e) {
}
</script>
</div>
<div class="main-content">
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div ng-view></div>
<!-- PAGE CONTENT ENDS -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.page-content -->
</div>
</div>
<!-- basic scripts -->
<!--[if !IE]> -->
<script type="text/javascript">
window.jQuery || document.write("<script src='resources/ace/assets/js/jquery.min.js'>" + "<" + "/script>");
</script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='resources/ace/assets/js/jquery1x.min.js'>" + "<" + "/script>");
</script>
<![endif]-->
<script type="text/javascript">
if ('ontouchstart' in document.documentElement) document.write("<script src='resources/ace/assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<!-- page specific plugin scripts -->
<!-- ace scripts -->
<script src="resources/ace/assets/js/ace.min.js"></script>
<script src="resources/ace/assets/js/ace-elements.min.js"></script>
<!-- inline scripts related to this page -->
<!-- the following scripts are used in demo only for onpage help and you don't need them -->
<link rel="stylesheet" href="resources/ace/assets/css/ace.onpage-help.css"/>
<link rel="stylesheet" href="resources/ace/docs/assets/js/themes/sunburst.css"/>
<script type="text/javascript"> ace.vars['base'] = '..'; </script>
<script type="text/javascript" src="resources/ace/assets/js/ace/elements.onpage-help.js"></script>
<script type="text/javascript" src="resources/ace/assets/js/ace/ace.onpage-help.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/rainbow.js"></script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/generic.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/html.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/css.js"> </script>
<script type="text/javascript" src="resources/ace/docs/assets/js/language/javascript.js"></script>
<!--<script type="text/javascript" src="resources/ace/assets/js/jquery.min.js"></script>-->
<script type="text/javascript" src="resources/ace/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="resources/angular/angular.js"></script>
<script type="text/javascript" src="resources/angular/angular-route.js"></script>
<script type="text/javascript" src="resources/angular/xeditable.js"></script>
<script type="text/javascript" src="resources/angular/angular-local-storage.js"> </script>
<script type="text/javascript" src="resources/angular/angular-resource.js"></script>
<script type="text/javascript" src="resources/angular/angular-sanitize.js"></script>
<script type="text/javascript" src="resources/angular/angular-translate.js"></script>
<script type="text/javascript" src="resources/angular/angular-touch.js"></script>
<script type="text/javascript" src="resources/angular/angular-animate.js"></script>
<script type="text/javascript" src="resources/Smart-Table.debug.js"></script>
<script type="text/javascript" src="resources/ui-bootstrap-tpls-0.11.0.min.js"> </script>
<script type="text/javascript" src="resources/ng-modal/ng-modal.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/lodash.min.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/highlight.min.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/angular-highlightjs.js"></script>
<script type="text/javascript" src="resources/angularjs-dropdown-multiselect/angularjs-dropdown-multiselect.js"></script>
<script type="text/javascript" src="resources/pdfjs-mod/pdf.js"></script>
<script type="text/javascript" src="resources/directives/angular-pdf.js"></script>
<script type="text/javascript" src="resources/directives/partials-css.js"></script>
<script type="text/javascript" src="resources/ui-layout/ui-layout.js"></script>
<script type="text/javascript" src="resources/ui-grid/ui-grid.js"></script>
<!-- The following are for exporting from ui-grid -->
<script type="text/javascript" src="resources/ui-grid/csv.js"></script>
<script type="text/javascript" src="resources/ui-grid/pdfmake.js"></script>
<script type="text/javascript" src="resources/ui-grid/vfs_fonts.js"></script>
<!-- TEST DRIVE SCRIPTS (Determine to keep or throw away) -->
<script type="text/javascript" src="resources/ng-grid/ng-grid-2.0.11.debug.js"></script>
<!-- DISCUS-NG Angular JavaScript -->
答案 0 :(得分：0)
在发送点击事件之前，大多数移动浏览器在点按并释放后等待约300毫秒。
使用提供ngClick替换的ngTouch模块可能会为您解决此问题： https://code.angularjs.org/1.2.25/docs/api/ngTouch/directive/ngClick
答案 1 :(得分：0)
在搜索Stack Overflow时，我发现了一个有点相关的问题，并做了一些试验和错误。我的问题结果是Angular和Ace Admin模板之间的冲突。我最终在Angular调用之后移动了两个Ace JavaScript调用（ace.min.js和ace-elements.min.js），然后突然切换的菜单按钮在Firefox和Chrome中的PC和移动设备上运行。