twitter-bootstrap - モバイル モードでのナビゲート (リンク クリック) でナビゲーション バーを折りたたむ

Question

angularでブートストラップ3を使用しています。リンクをクリックしてもページがリロードされないため、モバイル モードではメニューが開いたままになります。

メニュー項目をクリックしたときにメニューを自動的に閉じるにはどうすればよいですか?

タグに追加しようとし data-toggle="collapse" data-target=".navbar-responsive-collapse"ましたaが、デスクトップモードで奇妙な動作が発生します。

Answer 1

これは、以前の回答の更新版です

angular.module('app').directive('navCollapse', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var visible = false;

            element.on('show.bs.collapse', function () {
                visible = true;
            });

            element.on("hide.bs.collapse", function () {
                visible = false;
            });

            element.on('click', function(event) {
                if (visible && 'auto' == element.css('overflow-y')) {
                    element.collapse('hide');
                }
            });
        }
    };
});

HTML

    <div class="collapse navbar-collapse navbar-app-collapse" nav-collapse="">
        <ul class="nav navbar-nav">

        </ul>
    </div>

Answer 2

これが私が最終的に使用した角度ディレクティブです。注意すべき点がいくつかあります。

• デスクトップ モードでメニューを折りたたまない (overflow-y == auto を探す)
• ウィンドウが拡大すると閉じる開いているメニューでウィンドウのサイズを変更するときのメニュー状態を処理します。

nav クラスの要素で ic-nav-autoclose ディレクティブを使用します。

---

angular.module('incmn')
    .directive('icNavAutoclose', function () {
        console.log("icNavAutoclose");
        return function (scope, elm, attrs) {
            var collapsible = $(elm).find(".navbar-collapse");
            var visible = false;

            collapsible.on("show.bs.collapse", function () {
                visible = true;
            });

            collapsible.on("hide.bs.collapse", function () {
                visible = false;
            });

            $(elm).find("a").each(function (index, element) {
                $(element).click(function (e) {
                    if (visible && "auto" == collapsible.css("overflow-y")) {
                        collapsible.collapse("hide");
                    }
                });
            });
        }
    });

Answer 3

私はこのようにしました。

$(selector).click(function () {
  //for close, opened dropdown.
  if ($("nav").hasClass("in")) {
    $('[data-toggle="collapse"]').click();
  }
});

Answer 4

画面上のどこで発生しても、次のクリック後にナビゲーションバーを折りたたむ場合:

1. .navbar-toggleボタンでナビゲーションのみを開くようにします。

   <div class="navbar-header">
       <button class="navbar-toggle" ng-click="collapsed = true">
   </div>
   

2. .navbar-collapseクリックするとナビゲーションを閉じる非表示のフルスクリーン アンダーレイを追加します。

   .invisible-underlay {
       position: fixed;
       top: 0;
       left: 0;
       height: 100%;
       width: 100%;
       background-color: transparent;
   }
   
   <div class="navbar-collapse" collapse="navbarCollapsed" ng-click="navbarCollapsed = true">
       <div class="invisible-underlay"></div>
       <ul class="nav navbar-nav navbar-right">
           <li><a ui-sref="home">Home</a></li>
       </ul>
   </div>
   

Answer 5

このコードは、ナビゲーション バーのドロップダウン sebmenu で動作します

angular.module('app').directive('navCollapse', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var visible = false;

            element.on('show.bs.collapse', function () {
                visible = true;
            });

            element.on("hide.bs.collapse", function () {
                visible = false;
            });

            element.on('click', function (event) {
                if (visible && 'auto' == element.css('overflow-y') && $(event.target).attr('data-toggle')!="dropdown") {
                    element.collapse('hide');
                }
            });
        }
    };
});