0
私は、角度1、ブートストラップ、CSS3を使用してWebサイトを作成しました。私はブートストラップnavbarを使用して、それはデスクトップモードで正常に動作します。しかし、サブメニューはモバイルバージョンで動作しません。メインメニュー項目が適切に展開されます。私は3つのサブメニューが存在し、私はこの問題を3週間修正することができませんでした。これは、基本的には、角度ルーティングロジックブートストラップのv3.3.6ドロップダウンメニューはモバイルでは展開されません
を持つ単一ページのアプリケーションであるブートストラップバージョン：3.3.6
私のウェブサイトは、あなたがモバイルモードで、この問題を見つけることができますwww.europeansaga.comです。
コードミッケルの提案を1として
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>メニューデータを含むHTMLとJSモデルと一緒に以下ではonclickのCSSクラスとしてサーバーにdocument.ready内部以下のコードを配置しました。それでも動作しません。誰か助けてください。これは私が、私はこのための私のプロジェクトで使用修正を持って
// 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