Bootstrap v3.3.6 下拉子菜单项在移动端不展开

Question

我使用 angular 1、bootstrap、CSS3 创建了一个网站。我使用了引导导航栏，它在桌面模式下工作正常。但是，子菜单在移动版本中不起作用。主菜单项可以正常展开。但是我有三个子菜单，我根本看不到子菜单下拉项.我为此苦苦挣扎了 3 周，现在无法修复它。它基本上是一个带有角度路由逻辑的单页应用程序

引导版本：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');
			      }
			  });

Answer 1

我有一个我在我的项目中使用的修复程序。对不起，你不得不浪费时间去追逐它。

// Patch for bootstrap hamburger menu
$(document).on('click', '.navbar-collapse.in', function (e) {
    if ($(e.target).is('a')) {
        $(this).collapse('hide');
    }
});