我使用angular 1，bootstrap，CSS3创建了一个网站。我使用了bootstrap导航栏，它在桌面模式下工作正常。但是，子菜单在移动版本中不起作用。主菜单项正确扩展。但是我有三个子菜单，我无法看到子菜单下拉项目我现在很难与它斗争3周，现在无法修复它。它基本上是一个带有角度路由逻辑的单页面应用程序
Bootstrap版本：3.3.6
我的网站是www.europeansaga.com，您可以在移动模式下找到此问题。
代码如下，以及包含菜单数据的HTML和JS模型
JS code inside my controller
$scope.mainMenu = [ {
name : 'Home',
hasChild : false,
iconClass : 'glyphicon glyphicon-home',
url : '/'
}, {
name : 'Gallery',
hasChild : false,
iconClass : 'glyphicon glyphicon-camera',
isActive : false,
url : '/gallery'
}, {
name : 'Destination',
hasChild : true,
iconClass : 'glyphicon glyphicon-map-marker',
isActive : false,
url : '/destinations'
}, {
name : 'Best of Solo Travel',
hasChild : true,
iconClass : 'glyphicon glyphicon-heart',
isActive : false,
url : '/bestOfSoloTravel'
}, {
name : 'Travel Planning',
hasChild : true,
iconClass : 'glyphicon glyphicon-book',
isActive : false,
url : '/travelPlanning'
} ];
var destinationSubMenuItems = [ {
name : 'Iceland',
url : 'Iceland'
}, {
name : 'Amsterdam',
url : 'Amsterdam'
}, {
name : 'Barcealona',
url : 'Barcealona'
}, {
name : 'Santorini',
url : 'Santorini'
}, {
name : 'La Tomatina 2016',
url : 'La-Tomatina-2016'
}, {
name : 'Croatia',
url : 'Croatia'
}, {
name : 'Italy',
url : 'Italy'
} ];
var travelPlanningSubMenuItems = [ {
name : 'Barcealona',
url : 'BarcealonaPlanning'
}, {
name : 'Santorini',
url : 'SantoriniPlanning'
},{
name : 'Salzgermmut',
url : 'SalzgermmutPlanning'
},
{
name : 'La-Tomatina',
url : 'La-Tomatina-Bunol-Planning-Information'
}];
var bestofSoloTravelSubMenuItems = [ {
name : 'Nomads acquaintance',
url : 'Solo-Travel-Acquaintances'
}, {
name : 'Hostel Culture',
url : 'Hostel-Culture-Experience-In-Europe'
}, {
name : 'Unleashing cooking skills',
url : 'How-to-prepare-Indian-Food-in-SoloTravel'
} ];
$scope.selectedDestination = null;
$scope.submenu = {};
$scope.submenu['Travel Planning'] = [];
for (var i = 0; i < travelPlanningSubMenuItems.length; i++) {
$scope.submenu['Travel Planning'].push(travelPlanningSubMenuItems[i]);
}
$scope.submenu['Destination'] = [];
for (var i = 0; i < destinationSubMenuItems.length; i++) {
$scope.submenu['Destination'].push(destinationSubMenuItems[i]);
}
$scope.submenu['Best of Solo Travel'] = [];
for (var i = 0; i < bestofSoloTravelSubMenuItems.length; i++) {
$scope.submenu['Best of Solo Travel'].push(bestofSoloTravelSubMenuItems[i]);
} <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="site-navigation-inner col-sm-12">
<div class="navbar-header">
<button type="button" class="btn navbar-toggle"
data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<div id="logo">
<h1 class="site-name">
<a class="navbar-brand" href="#/" rel="home">EUROPEAN SAGA
- A SOLO ADVENTURE</a>
</h1>
</div>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li
ng-class="{dropdown: menuItem.hasChild,active: menuItem.isActive}"
ng-repeat="menuItem in mainMenu"><a
class="dropdown-toggle centerAlignItems" data-toggle="dropdown"
href="#{{menuItem.url}}"> <span
class="{{menuItem.iconClass}}"></span> {{menuItem.name}}<span
ng-if="menuItem.hasChild" class="caret"></span>
</a>
<ul ng-class="{'dropdown-menu': menuItem.hasChild}"
ng-if="menuItem.hasChild">
<li ng-repeat="(key, value) in submenu[menuItem.name]"><a
href="#{{value.url}}">{{value.name}}</a></li>
</ul></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
根据Mikkel的建议，将下面的代码放在document.ready中作为CSS类onclick放入服务器。它仍然无法正常工作。请有人帮忙。我无法公开我的网站，因为这是我面临的主要问题之一
// Patch for bootstrap hamburger menu
$(".navbar-responsive-collapse").click(function (e) {
if ($(e.target).is('a')) {
$(this).collapse('hide');
}
});
答案 0 :(得分：0)
我有一个修复，我在我的项目中使用它。对不起，你不得不浪费时间追逐它。
// Patch for bootstrap hamburger menu
$(document).on('click', '.navbar-collapse.in', function (e) {
if ($(e.target).is('a')) {
$(this).collapse('hide');
}
});