87

「PRODUCTS」をクリックすると、白い div が上にスライドします (添付の図を参照)。レスポンシブ (モバイルおよびタブレット) の場合、レスポンシブ ナビゲーション バーを自動的に閉じて、白いバーのみを表示したいと思います。

私は試した：

$('.btn-navbar').click();

も試しました：

$('.nav-collapse').toggle();

そして、それは機能します。ただし、デスクトップサイズでは、それも呼び出され、メニューに対してファンキーなことを行い、メニューが一瞬縮小します。

何か案は？

ここに画像の説明を入力

4

24 に答える 24

41

私はあなたがエンジニアリングのすべてだと思います..

    $('.navbar-collapse ul li a').click(function(){ 
            $('.navbar-toggle:visible').click();
    });

EDIT：サブメニューを処理するには、トグルアンカーにドロップダウントグルクラスがあることを確認してください。

    $(function () { 
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function () { 
                    $('.navbar-toggle:visible').click(); 
            }); 
    });

編集 2: 電話タッチのサポートを追加します。

    $(function () {
            $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click touchstart', function () {
                    $('.navbar-toggle:visible').click();
            });
    });
于 2014-04-19T14:59:49.230 に答える
5

Bootstrapの例とすべてに基づいて、ナビゲーション領域を定義するこのような行があると仮定しています

<div class="nav-collapse collapse" >

メニューボタンのように、プロパティをそのまま追加するだけです

<div class="nav-collapse collapse" data-toggle="collapse"  data-target=".nav-collapse">

私も追加しましたが<body>、うまくいきました。私はそれをプロファイリングしたとは言えませんが、私には扱いのようです.UIのランダムな場所をクリックしてメニューを開くまでは、それほど良くありません.

DK

于 2013-06-21T19:37:11.187 に答える
4

これは機能しますが、アニメーション化されません。

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
于 2013-01-07T22:27:25.343 に答える
3

このソリューションは、デスクトップとモバイルでうまく機能します。

<div id="navbar" class="navbar-collapse collapse" data-toggle="collapse"  data-target=".navbar-collapse collapse">
于 2015-12-12T14:28:58.800 に答える
3

HTML では、各ナビゲーション リンクのaタグにnav-linkのクラスを追加しました。

$('.nav-link').click(
    function () {
        $('.navbar-collapse').removeClass('in');
    }
);
于 2015-04-20T18:12:36.930 に答える
2

これでうまくいくはずです。

bootstrap.js が必要です。

例 => http://getbootstrap.com/javascript/#collapse

    $('.nav li a').click(function() {
      $('#nav-main').collapse('hide');
    });

これは、'data-toggle="collapse"' および 'href="yournavigationID"' 属性をナビゲーション メニュー タグに追加するのと同じことを行います。

于 2015-08-25T17:49:52.483 に答える
1

これは私にとってはうまくいきました。メニューボタンをクリックすると、そのクラスを追加または削除することでトグルがデフォルトで機能するため、「in」クラスを追加または削除します。「e.stopPropagation()」は、ブートストラップによってデフォルトのアニメーションを停止することです(私は推測します)。クラスの追加または削除の代わりに「toggleClass」を使用することもできます。

$('#ChangeToggle').on('クリック', function (e) {

        if ($('.navbar-collapse').hasClass('in')) {
            $('.navbar-collapse').removeClass('in');
            e.stopPropagation();
        } else {
            $('.navbar-collapse').addClass('in');
            $('.navbar-collapse').collapse();
        }

    });
于 2017-01-06T00:38:46.190 に答える
1

最新のスレッドではありませんが、同じ問題の解決策を検索したところ、1 つ見つかりました (他のいくつかの組み合わせ)。

私は NavButton を与えました:

<type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ...

次のような id / 識別子:

 <button id="navcop" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

最高の「アイデア」ではありませんが、私にとってはうまくいきます！これで、ボタンの可視性を (jquery で) 次のように確認できます。

 var target = $('#navcop');
   if(target.is(":visible")){
   $('#navcop').click();
   }

(注: これは単なるコードの抜粋です! Nav リンクで「onclick」イベントを使用しました! (AJAX リクエストの開始)。

結果は次のとおりです。ボタンが「表示」されている場合、「クリック」されました...したがって、Bootstrapの「全画面表示」（幅940px以上）を使用する場合、バグはありません。

こんにちはラルフ

PS: IE9、IE10、および Firefox 25 で正常に動作します。他のものはチェックしていませんが、問題は見られません :-)

于 2013-11-05T12:29:42.557 に答える
1

2 つの改善点を追加しましたが、mollwe 関数を使用しています。

a）クリックされたリンクが折りたたまれている場合（他のリンクを含む）、ドロップダウンが閉じないようにします

b) 表示されている Web コンテンツをクリックしている場合は、ドロップダウンも非表示にします。

jQuery.fn.exists = function() {
                  return this.length > 0;
              }

    $(function() {
                var navMain = $(".navbar-collapse");
                navMain.on("click", "a", null, function() {
                    if ($(this).attr("href") !== "#") {
                        navMain.collapse('hide');
                    }
                });

                $("#content").bind("click", function() {
                     if ($(".navbar-collapse.navbar-ex1-collapse.in").exists()) {
                        navMain.collapse('hide');
                    }
                });

            });
于 2013-08-25T17:53:46.140 に答える
0

たとえば、切り替え可能なアイコンが非常に小さいデバイスでのみ表示される場合は、次のようにすることができます。

$('[data-toggle="offcanvas"]').click(function () {
    $('#side-menu').toggleClass('hidden-xs');
});

[data-toggle="offcanvas"] をクリックすると、ブートストラップの .hidden-xs が #side-menu に追加され、サイド メニューのコンテンツが非表示になりますが、ウィンドウ サイズを大きくすると再び表示されます。

于 2015-02-03T10:23:32.187 に答える
0

使用できます

ul.nav {
    display: none;
}

これにより、デフォルトでナビゲーションバーが閉じます。これが便利だと思う人は教えてください

于 2013-06-28T16:01:47.023 に答える