0
我已经使用角度1，引导程序，CSS3创建了一个网站。我使用了bootstrap导航栏，并且它在桌面模式下工作正常。但是，子菜单在手机版本中不起作用。主菜单项正确展开。但是，我有三个子菜单存在，并且我无法看到子菜单中的所有下拉项。我现在正在为此打了3个星期，现在无法解决这个问题。它基本上是与角路由逻辑Bootstrap v3.3.6下拉子菜单项不会在移动设备中展开
一个单页的应用程序引导的版本：3.3.6
我的网站是www.europeansaga.com在那里你可以找到在移动模式下这个问题。
代码是下面的HTML和含有JS模型沿着菜单数据
JS code inside my controller
$scope.mainMenu = [ {
\t \t \t \t \t \t name : 'Home',
\t \t \t \t \t \t hasChild : false,
\t \t \t \t \t \t iconClass : 'glyphicon glyphicon-home',
\t \t \t \t \t \t url : '/'
\t \t \t \t \t }, {
\t \t \t \t \t \t name : 'Gallery',
\t \t \t \t \t \t hasChild : false,
\t \t \t \t \t \t iconClass : 'glyphicon glyphicon-camera',
\t \t \t \t \t \t isActive : false,
\t \t \t \t \t \t url : '/gallery'
\t \t \t \t \t }, {
\t \t \t \t \t \t
\t \t \t \t \t \t name : 'Destination',
\t \t \t \t \t \t hasChild : true,
\t \t \t \t \t \t iconClass : 'glyphicon glyphicon-map-marker',
\t \t \t \t \t \t isActive : false,
\t \t \t \t \t \t url : '/destinations'
\t \t \t \t \t }, {
\t \t \t \t \t \t name : 'Best of Solo Travel',
\t \t \t \t \t \t hasChild : true,
\t \t \t \t \t \t iconClass : 'glyphicon glyphicon-heart',
\t \t \t \t \t \t isActive : false,
\t \t \t \t \t \t url : '/bestOfSoloTravel'
\t \t \t \t \t }, {
\t \t \t \t \t \t name : 'Travel Planning',
\t \t \t \t \t \t hasChild : true,
\t \t \t \t \t \t iconClass : 'glyphicon glyphicon-book',
\t \t \t \t \t \t isActive : false,
\t \t \t \t \t \t url : '/travelPlanning'
\t \t \t \t \t } ];
\t \t \t \t \t var destinationSubMenuItems = [ {
\t \t \t \t \t \t name : 'Iceland',
\t \t \t \t \t \t url : 'Iceland'
\t \t \t \t \t }, {
\t \t \t \t \t \t name : 'Amsterdam',
\t \t \t \t \t \t url : 'Amsterdam'
\t \t \t \t \t }, {
\t \t \t \t \t \t name : 'Barcealona',
\t \t \t \t \t \t url : 'Barcealona'
\t \t \t \t \t }, {
\t \t \t \t \t \t name : 'Santorini',
\t \t \t \t \t \t url : 'Santorini'
\t \t \t \t \t }, {
\t \t \t \t \t \t name : 'La Tomatina 2016',
\t \t \t \t \t \t url : 'La-Tomatina-2016'
\t \t \t \t \t }, {
\t \t \t \t \t \t name : 'Croatia',
\t \t \t \t \t \t url : 'Croatia'
\t \t \t \t \t }, {
\t \t \t \t \t \t name : 'Italy',
\t \t \t \t \t \t url : 'Italy'
\t \t \t \t \t } ];
\t \t \t \t \t var travelPlanningSubMenuItems = [ {
\t \t \t \t \t \t name : 'Barcealona',
\t \t \t \t \t \t url : 'BarcealonaPlanning'
\t \t \t \t \t }, {
\t \t \t \t \t \t name : 'Santorini',
\t \t \t \t \t \t url : 'SantoriniPlanning'
\t \t \t \t \t },{
\t \t \t \t \t \t name : 'Salzgermmut',
\t \t \t \t \t \t url : 'SalzgermmutPlanning'
\t \t \t \t \t },
\t \t \t \t \t {
\t \t \t \t \t \t name : 'La-Tomatina',
\t \t \t \t \t \t url : 'La-Tomatina-Bunol-Planning-Information'
\t \t \t \t \t }];
\t \t \t \t \t var bestofSoloTravelSubMenuItems = [ {
\t \t \t \t \t \t name : 'Nomads acquaintance',
\t \t \t \t \t \t url : 'Solo-Travel-Acquaintances'
\t \t \t \t \t }, {
\t \t \t \t \t \t name : 'Hostel Culture',
\t \t \t \t \t \t url : 'Hostel-Culture-Experience-In-Europe'
\t \t \t \t \t }, {
\t \t \t \t \t \t name : 'Unleashing cooking skills',
\t \t \t \t \t \t url : 'How-to-prepare-Indian-Food-in-SoloTravel'
\t \t \t \t \t } ];
\t \t \t \t \t $scope.selectedDestination = null;
\t \t \t \t \t $scope.submenu = {};
\t \t \t \t \t $scope.submenu['Travel Planning'] = [];
\t \t \t \t \t for (var i = 0; i < travelPlanningSubMenuItems.length; i++) {
\t \t \t \t \t \t $scope.submenu['Travel Planning'].push(travelPlanningSubMenuItems[i]);
\t \t \t \t \t }
\t \t \t \t \t $scope.submenu['Destination'] = [];
\t \t \t \t \t for (var i = 0; i < destinationSubMenuItems.length; i++) {
\t \t \t \t \t \t $scope.submenu['Destination'].push(destinationSubMenuItems[i]);
\t \t \t \t \t }
\t \t \t \t \t $scope.submenu['Best of Solo Travel'] = [];
\t \t \t \t \t for (var i = 0; i < bestofSoloTravelSubMenuItems.length; i++) {
\t \t \t \t \t \t $scope.submenu['Best of Solo Travel'].push(bestofSoloTravelSubMenuItems[i]);
\t \t \t \t \t }\t <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
\t \t \t <div class="container">
\t \t \t \t <div class="row">
\t \t \t \t \t <div class="site-navigation-inner col-sm-12">
\t \t \t \t \t \t <div class="navbar-header">
\t \t \t \t \t \t \t <button type="button" class="btn navbar-toggle"
\t \t \t \t \t \t \t \t data-toggle="collapse" data-target=".navbar-responsive-collapse">
\t \t \t \t \t \t \t \t <span class="sr-only">Toggle navigation</span> <span
\t \t \t \t \t \t \t \t \t class="icon-bar"></span> <span class="icon-bar"></span> <span
\t \t \t \t \t \t \t \t \t class="icon-bar"></span>
\t \t \t \t \t \t \t </button>
\t \t \t \t \t \t \t <div id="logo">
\t \t \t \t \t \t \t \t <h1 class="site-name">
\t \t \t \t \t \t \t \t \t <a class="navbar-brand" href="#/" rel="home">EUROPEAN SAGA
\t \t \t \t \t \t \t \t \t \t - A SOLO ADVENTURE</a>
\t \t \t \t \t \t \t \t </h1>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="navbar-collapse collapse navbar-responsive-collapse">
\t \t \t \t \t \t \t <ul class="nav navbar-nav">
\t \t \t \t \t \t \t \t <li
\t \t \t \t \t \t \t \t \t ng-class="{dropdown: menuItem.hasChild,active: menuItem.isActive}"
\t \t \t \t \t \t \t \t \t ng-repeat="menuItem in mainMenu"><a
\t \t \t \t \t \t \t \t \t class="dropdown-toggle centerAlignItems" data-toggle="dropdown"
\t \t \t \t \t \t \t \t \t href="#{{menuItem.url}}"> <span
\t \t \t \t \t \t \t \t \t \t class="{{menuItem.iconClass}}"></span> {{menuItem.name}}<span
\t \t \t \t \t \t \t \t \t \t ng-if="menuItem.hasChild" class="caret"></span>
\t \t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t \t \t <ul ng-class="{'dropdown-menu': menuItem.hasChild}"
\t \t \t \t \t \t \t \t \t \t ng-if="menuItem.hasChild">
\t \t \t \t \t \t \t \t \t \t <li ng-repeat="(key, value) in submenu[menuItem.name]"><a
\t \t \t \t \t \t \t \t \t \t \t href="#{{value.url}}">{{value.name}}</a></li>
\t \t \t \t \t \t \t \t \t </ul></li>
\t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </nav>作为每了Mikkel的建议放置在下面的代码内的document.ready到服务器作为CSS类的onclick。它仍然不起作用。请有人帮忙。我不能暴露我的网站，因为这是我面对
// Patch for bootstrap hamburger menu
\t \t \t $(".navbar-responsive-collapse").click(function (e) {
\t \t \t if ($(e.target).is('a')) {
\t \t \t $(this).collapse('hide');
\t \t \t }
\t \t \t });
对不起，这没有工作我把下面的代码放在文档就绪块，但没有任何工作。在子菜单根本不扩展的情况下，问题仍然是一样的。我有3个子菜单（如果你看看网站，你会明白）。 – Balaji
Mikkel我已经用正确的问题更新了这个问题。请访问该网站，您将能够看到实际问题。我无法正确展开并查看子菜单中的下拉项目（目的地，最佳单人旅行，旅行计划 - 他们有子菜单项），这些项目在移动设备中未得到扩展 – Balaji