web-dev-qa-db-ja.com

Bootstrap 3？のnavbar要素の外側をクリックすると、開いた折りたたみnavbarを閉じる方法

Navbar要素の外側をクリックして開いた折りたたみnavbarを閉じるにはどうすればよいですか？現在、それを開くまたは閉じる唯一の方法は、navbar-toggleボタン。

例とコードについては here をご覧ください：

これまでのところ、私は次のことを試しましたが、うまくいかないようです：

jQuery(document).click(function() {

});

jQuery('.navbar').click(function(event) {
    jQuery(".navbar-collapse").collapse('hide');
    event.stopPropagation();
});
javascriptjqueryhtmlcsstwitter-bootstrap-3
38
henrywright

それを見てください：

_$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle")) {
            $("button.navbar-toggle").click();
        }
    });
});
_

あなたのフィドルはそれで動作します： http://jsfiddle.net/52VtD/5718/

この答え の修正版で、アニメーションがなく、少し複雑です。

click()の呼び出しはあまりエレガントではありませんが、collapse('hide')は私にとってもうまくいきませんでした。アニメーションは、クラスの追加や削除よりも少しいいと思います。

43
nozzleman

受け入れられた答えは正しく機能していないようです。 「navbar-collapse」に「in」クラスがあるかどうかを確認するだけです。 navbarへの参照を使用して、期待どおりにcollapseメソッドを起動できます。

$(document).click(function (event) {
    var clickover = $(event.target);
    var $navbar = $(".navbar-collapse");               
    var _opened = $navbar.hasClass("in");
    if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
        $navbar.collapse('hide');
    }
});
35
Paul Tarr

これを使用すると、私にとってはうまくいきます。

$(function() {
  $(document).click(function (event) {
    $('.navbar-collapse').collapse('hide');
  });
});
17
Shiva Charan

私が使用することにした解決策は、ここで受け入れられた答えと この答え

jQuery('body').bind('click', function(e) {
    if(jQuery(e.target).closest('.navbar').length == 0) {
        // click happened outside of .navbar, so hide
        var opened = jQuery('.navbar-collapse').hasClass('collapse in');
        if ( opened === true ) {
            jQuery('.navbar-collapse').collapse('hide');
        }
    }
});

これにより、ユーザーが.navbar要素以外の場所をクリックすると、開いた折りたたみナビゲーションメニューが非表示になります。もちろん、.navbar-toggleをクリックしても、メニューを閉じることができます。

15
henrywright

stopPropagation()は常に最良のソリューションではありません。むしろ次のようなものを使用します。

_jQuery(document.body).on('click', function(ev){
    if(jQuery(ev.target).closest('.navbar-collapse').length) return; // Not return false

    // Hide navbar
});
_

_.navbar_の他のイベントをリッスンしたくないと想定するのは危険だと思います。 stopPropagation()を使用する場合、これは不可能です。

4
pstenstrm

Bootstrap 4（.3.1）のノズルマンの回答を変換：

$(document).ready(function () {
    $(document).click(
        function (event) {
            var target = $(event.target);
            var _mobileMenuOpen = $(".navbar-collapse").hasClass("show");
            if (_mobileMenuOpen === true && !target.hasClass("navbar-toggler")) {
                $("button.navbar-toggler").click();
            }
        }
    );
});

NgOnInit（）に配置されます。

ドキュメントが読み込まれると、このコードはクリックイベントを待ちます。モバイルメニュードロップダウンが開いている（つまり、navbarの折りたたみ可能な部分に「show」クラスがある）場合、クリックされたオブジェクト（ターゲット）がモバイルメニューボタンではない（つまり、「navbar-toggler」クラスを持っていない）モバイルメニューボタンがクリックされたことを伝え、メニューが閉じます。

1
KRN

非リンクがあり、ユーザーがこれらのアイテムを誤ってクリックした場合にパネルを閉じたくないというシナリオがありました。ここの他の回答willは、リンクではないアイテムのテキストをクリックしてもパネルを閉じます。

これを修正するために、私はPaul Tarrの答えに追加しました。チェックを入れて解決策をラップし、クリックが

if ($(event.target).parents(".navbar-collapse").length < 1) { }

完全なコードは次のようになります。

$(document).click(function (event) {
if ($(event.target).parents(".navbar-collapse").length < 1) {
    var clickover = $(event.target);
    var $navbar = $(".navbar-collapse");               
    var _opened = $navbar.hasClass("in");
    if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
        $navbar.collapse('hide');
    }
  }
});

この demo fiddle では、パネル内の非リンクをクリックしても折りたたまれないことがわかります。

1
maxshuty

@nozzlemanの回答に条件を追加して、メニュー内のいずれかの要素でタップまたはクリックが行われたかどうかを確認し、その場合は折りたたまないようにします。

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle") && clickover.parents('.navbar-collapse').length == 0) {
            $("button.navbar-toggle").click();
        }
    });
});
1
sonxurxo
$(document).click(function (event) {
 if ($('.navbar-collapse').attr('aria-expanded') == "true") {
        $('.navbar-collapse:visible').click();
    }
});
0
Venkanna t

Bootstrap 4：

$(document).click(function(event) {
  $(event.target).closest(".navbar").length || $(".navbar-collapse.show").length && $(".navbar-collapse.show").collapse("hide")
});
0
Timur

Bootstrap 4

ブートストラップ4にはinクラスがありません。これはCoffeescriptです。

  $(document).click (e)->
    #console.log e.target
    unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length
      $('#toggle-menu').collapse('hide')

基本的に、ボタンまたはメニューをクリックしない限り、メニューを閉じます。

注：奇妙なことに、iOSでテキストをクリックしても、クリックイベントやmouseupイベントは登録されません。ただし、画像をクリックするとイベントが発生します。

0
Chloe
$(window).click(function (e) {
     if ($(e.target).closest('.codehim-dropdown').length) {
         return;
     }
     if ($(e.target).closest(offCanvas).length) {
         return;
     }

     //check if menu really opened
     if ($(hamburger).hasClass("active")) {
         closeMenu();
     }

     $(dimOverlay).fadeOut();

     $(".menu-items").slideUp();
     $(".dropdown-heading").removeClass("active");

});
0
muthu