Twitter Bootstrap navを隠すクリックで折りたたむ

これはサブメニューのドロップダウンではなく、カテゴリは画像のようにクラスliです。

レスポンシブメニュー（テンプレートは1ページのみ）からカテゴリを選択することで、ナビゲーションの折りたたみを自動的に非表示にしたい。テンプレートにはページが1つしかないため、散歩してナビゲーションとして使用します。私はそれに影響を与えない解決策を探します、これはメニューのHTMLコードです：

    <!-- NAVBAR
  ================================================== -->
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Carousel Demo</a>
      <div class="nav-collapse">
        <ul class="nav" >
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#contact">Contact</a></li>
          <!-- dropdown -->
        </ul>
        <!-- /.nav -->
      </div>
      <!--/.nav-collapse -->
    </div>
    <!-- /.container -->
  </div>
  <!-- /.navbar-inner -->
</div>
<!-- /.navbar -->

これを試して：

$('.nav a').on('click', function(){
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click(); //bootstrap 3.x by Richard
    $('.navbar-toggler').click(); //bootstrap 4.x
});

次のように、各リンクでbtn-navbar（data-toggle="collapse" data-target=".nav-collapse.in"）の2つの属性を複製します。

<div class="nav-collapse">
  <ul class="nav" >
    <li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse.in">Home</a></li>
    <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse.in">About</a></li>
    <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse.in">Portfolio</a></li>
    <li><a href="#services" data-toggle="collapse" data-target=".nav-collapse.in">Services</a></li>
    <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse.in">Contact</a></li>
  </ul>
</div>

ではブートストラップ4ナビゲーションバー、inに変更されたshow構文は次のようになりので：

data-toggle="collapse" data-target=".navbar-collapse.show"

$(function() {
    $('.nav a').on('click', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $('.navbar-toggle').trigger( "click" );
        }
    });
});

デフォルトのcollapse.jsメソッドを使用する方が良い（V3ドキュメント、V4ドキュメント）：

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

重複したコードをなめることなく、さらにエレガントにするには、単純にdata-toggle="collapse"とdata-target=".nav-collapse"属性をナビゲーション自体に適用します。

<nav class="nav-collapse" data-toggle="collapse" data-target=".nav-collapse">
  <ul class="nav">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

非常にクリーンで、JavaScriptは必要ありません。限り、あなたのあなたのように、素晴らしい作品nav aの要素は脂肪の指のためにたくさんの十分なパディングを持っている、とあなたが経由してクリックイベントバブリングを防止していないe.stopPropagation()ユーザーがクリックしたときにnav aアイテム。

あなたの更新

<li>
  <a href="#about">About</a>
</li>

に

<li>
  <a data-toggle="collapse" data-target=".nav-collapse" href="#about">About</a>
</li>

この簡単な変更は私にとってうまくいきました。

参照：https : //github.com/twbs/bootstrap/issues/9013

ナビゲーションは、ナビゲーション要素だけでなく、ユーザーが本文の任意の場所をクリックしたときに閉じる必要があります。メニューが開いているが、ユーザーがページ本文をクリックしたとします。ユーザーはメニューを閉じることを期待しています。

また、トグルボタンが表示されていることを確認する必要があります。そうでない場合、ジャンプがメニューに表示されます。

$(document).ready(function() { 

$("body").click(function(event) {
        // only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called 
         if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
            $('.navbar-collapse').collapse('toggle');
        }
  });

});

Bootstrap 3.3.6でテスト済み-機能します！

$('.nav a').click(function () {
    $('.navbar-collapse').collapse('hide');
});

これを試す> Bootstrap 3

私が探していたものは非常に素晴らしかったですが、JavaScriptとブートストラップモーダルとの衝突がありました。

    $(function() {
    $('.navbar-nav').on('click', function(){ 
        if($('.navbar-header .navbar-toggle').css('display') !='none'){
            $(".navbar-header .navbar-toggle").trigger( "click" );
        }
    });
});

お役に立てれば。

これは私にはうまくいきました。承認された回答と同じですが、デスクトップ/タブレットビューに関連する問題を修正します

$('.navbar-nav a').on('click', function () {
        if (window.innerWidth <= 768) {
            $(".navbar-toggle").click();
        }
    });

デフォルトのBootstrap 3のcollapse.jsメソッドを使用する方が良いと思います.navbar-collapse以下に示すように、非表示にする折りたたみ要素としてて、ます。

他のソリューションでは、Webページでの要素の表示方法や機能に他の望ましくない問題が発生する可能性があります。したがって、最初の問題を解決するためにいくつかのソリューションが表示される可能性がありますが、他のソリューションを導入する可能性が非常に高いため、修正後にサイトの徹底的なテストを実行してください。

このコードの動作を確認するには：

1. 下の「このコードスニペットを実行」を押してください。
2. 「全ページ」ボタンを押します。
3. ドロップダウンがアクティブになるまでウィンドウを拡大縮小します。
4. 次に、メニューオプションと出来上がりを選択します。

乾杯！

$('.nav a').click(function() {
  $('.navbar-collapse').collapse('hide');  
});

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Franciscus Agnew">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap Navbar Collapse Function</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <header>
      <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-expanded="navbar"><span class="sr-only">Toggle navigation</span>Menu <span class="glyphicon glyphicon-chevron-down"></span></button>
            <a class="navbar-brand" href="#">Brand Logo</a>
          </div><!-- navbar-header -->
    
          <div class="collapse navbar-collapse" id="navbar">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#portfolio">Portfolio</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#staff">Staff</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul><!-- navbar-right -->
          </div><!-- navbar-collapse -->
          
        </div><!-- container -->
      </nav><!-- navbar-fixed-top -->
    </header>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
    
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
    <!-- Custom Navbar Collapse Script Solution -->
    <script>
      $('.nav a').click(function() {
        $('.navbar-collapse').collapse('hide');  
      });
    </script>
  </body>
</html>

各ドロップダウンリンクに、data-toggle = "collapse"およびdata-target = "。nav-collapse"を配置します。nav-collapseは、ドロップダウンリストに指定する名前です。

<ul class="nav" >
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li>
      <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li>
      <li><a href="#services" data-toggle="collapse" data-target="nav-collapse">Services</a></li>
      <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li>
      <!-- dropdown -->
  </ul>

これはモバイル画面のようなドロップダウンがある画面では完全に機能しますが、デスクトップとタブレットではフリッカーを作成します。これは、.collapsingクラスが適用されているためです。flickrを削除するために、メディアクエリを作成し、折りたたみクラスに非表示のオーバーフローを挿入しました。

@media (min-width: 768px) {
.collapsing {
    overflow: inherit;
  }
}

data-toggle = "collapse" data-target = "。navbar-collapse.in"をタグに追加するとうまくいき<a>ました。

<div>

        <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
    </div>
            <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item"><a
                    href="#" data-toggle="collapse" data-target=".navbar-collapse.in" class="nav-link" >Home
                </a></li>
            </ul>
    </div>

ここに私がそれをした方法があります。よりスムーズな方法がありましたら教えてください。

<a>メニューのリンクが含まれているタグ内に、次のコードを追加しました。

onclick="$('.navbar-toggle').click()"

スライドアニメーションを保持します。したがって、完全に使用すると、次のようになります。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="topNavController as topNav">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="home.html">My Cool Site</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active" onclick="$('.navbar-toggle').click()"><a href="home.html" onclick="$('.navbar-toggle').click()"><i class="fa fa-home"></i> Home</a></li>
            <li><a href="aboutus.html" onclick="$('.navbar-toggle').click()">About Us</a></li>
        </ul>
    </div><!--/.nav-collapse -->
</div>

$(function() {
    $('.nav a').on('click touchstart', function(){ 
        if($('.navbar-toggle').css('display') !='none'){
            $(".navbar-toggle").trigger( "click" );
        }
    });
});

//注モバイルタッチ用の「touchstart」を追加しました。touchstart / endには遅延がありません

これは私が使用した中で最高のソリューションです。

$(document).ready(function () {

        $('.nav a').on('click', function () {

            if ($(".btn-navbar").is(":visible") ){ $(".btn-navbar").trigger("click"); } //bootstrap 2.x
            if ($(".navbar-toggle").is(":visible")) { $(".navbar-toggle").trigger("click"); } //bootstrap 3.x
        });

    });

このソリューションを使用すると、デスクトップのナビゲーションバーがちらつくことに気づいた人のために：

$('.nav a').on('click', function(){
    $(".navbar-collapse").collapse('hide');
}); 

その問題の簡単な解決策は、「in」の存在を確認することによってのみ折りたたまれたナビゲーションバーを参照することです。

$('.navbar-collapse .nav a').on('click', function(){
    if($('.navbar-collapse').hasClass('in'))
    {
        $(".navbar-collapse").collapse('hide');
    }
});

これにより、ナビゲーションバーがモバイルモードのときにクリックするとナビゲーションバーが折りたたまれますが、デスクトップバージョンはそのままになります。これにより、多くの人がデスクトップバージョンで発生するちらつきを回避できます。

さらに、ドロップダウンメニューのあるナビゲーションバーがある場合、クリックするとすぐにナビゲーションバーが非表示になるため、これらを表示することはできません。したがって、ドロップダウンメニューがある場合（次のように！）

$('.nav a').on('click', function(e){
    if(!$(this).closest('li').hasClass('dropdown') & $( '.navbar-collapse').hasClass('in'))
    {
        $(".navbar-collapse").collapse('hide');
    }
});

これにより、DOMでクリックされたリンクの上にドロップダウンクラスが存在するかどうかが確認されます。存在する場合、リンクはドロップダウンメニューを起動するためのものであり、メニューは非表示になりません。ドロップダウンメニュー内のリンクをクリックすると、ナビゲーションバーが正しく非表示になります。

$("body,.nav a").click(function (event) {

    // only do this if navigation is visible, otherwise you see jump in
    //navigation while collapse() iS called 
    if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible")) {
    $('.navbar-collapse').collapse('toggle');
  }
});

100％の作業：-

HTMLに追加

<div id="myMenu" class="nav-collapse">

JavaScript

 $(function(){ 
 var navMain = $("#myMenu");
 navMain.on("click", "a", null, function () {
     navMain.collapse('hide');
 });
});

これは、アニメーションの代わりにナビゲーションの折りたたみを非表示にしますが、上記の答えと同じコンセプトです

JS：

$('.nav a').on('click', function () {
    $("#funk").toggleClass('in collapse');
});

HTML：

<div class="navbar-collapse" id="funk">

既にアニメーション化されているlocalScroll.jsを使用しているため、これは単一ページのサイトでこれを好みます。

モバイルビュー：ブートストラップ+ドロップダウン+ jquery + scrolltoで、同じページのアンカー/ IDを指すナビゲーションアイテムで1つのページテンプレートを切り替えて非表示にする方法

上記のソリューションのいずれかを試してみた問題は、ナビゲーションメニューが折りたたまれず、サブメニュー項目のみが折りたたまれていることでした。

だから私は自分の考えを..そして何を観察できますか？まあ、私たち/ユーザーがscrolltoリンクをクリックするたびに、ページをその位置までスクロールし、同時にメニューを折りたたんでページビューを復元します。

ええと...なぜこのジョブをscrollto関数に割り当てないのですか？簡単:-)

だから2つのコードで

// scroll to top action
$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');

そして

// scroll function
function scrollToID(id, speed){
var offSet = 67;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
    $('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
    mainNav.css("height", "1px").removeClass("in").addClass("collapse");
    mainNav.removeClass("open");
}

両方の機能に同じコマンドを追加しました

    if($('.navbar-toggle').css('display') !='none'){
    $(".navbar-toggle").trigger( "click" );
}

（上記の貢献者の1人に対するクドス）

このように（同じものを両方のスクロールに追加する必要があります）

$('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');
if($('.navbar-toggle').css('display') !='none'){
    $(".navbar-toggle").trigger( "click" );
}
});

動作を確認したい場合は、recupero dati da NASを確認してください

Bootstrap3ユーザーは、以下のコードを試してください。それは私のために働いた。

function close_toggle() {
   if ($(window).width() <= 768) {
      $('.nav a').on('click', function(){
          $(".navbar-toggle").click();
      });
   }
   else {
     $('.nav a').off('click');
   }
}
close_toggle();

$(window).resize(close_toggle);

Bootstrapは.in、Collapse要素にクラスを設定してアニメーションをトリガーし、アニメーションを開きます。単に.inクラスを削除すると、アニメーションは実行されませんが、要素が非表示になります。これは、希望どおりではありません。

要素にifデフォルトのブートストラップクラス.inが設定されているかどうかを確認するステートメントを実行する方が速いと思われます。

したがって、このコードはただ言う：

要素にクラスが.in適用されている場合は、デフォルトのブートストラップアニメーションをトリガーしてクラスを閉じます。それ以外の場合は、デフォルトのブートストラップアクション/それを開くアニメーションを実行します

$('#navbar a').on('click touchstart', function() {
    // if .in class is set on element, the element is visible – you want to hide it
    if ($('#navbar').hasClass('in')) {
        // collapse toggle will remove the .in class and animate the element closed 
        $('#navbar').collapse('toggle');
    }
})

次に、それぞれにIDを追加します

<li> add data-target="myMenu" data-toggle="collapse"
<div id="myMenu" class="nav-collapse">
    <ul class="nav">
      <li class="active" data-target="myMenu" data-toggle="collapse"><a href="#home">Home</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#about">About</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#portfolio">Portfolio</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#services">Services</a></li>
      <li data-target="myMenu" data-toggle="collapse"><a href="#contact">Contact</a></li>
    </ul>
</div>

Bootstrap 3. *の別の簡単な解決策は次のとおりです。

$( document ).ready(function() {
    //
    // Hide collapsed menu on click
    //
    $('.nav a').each(function (idx, obj) {
        var selected = $(obj);

        selected.on('click', function() {
            if (selected.closest('.collapse.in').length > 0) {
                $('.navbar-toggle').click(); //bootstrap 3.x by Richard
            }
        });
    });
});

私はAureliaで動作するソリューションをここに投稿しました： https //stackoverflow.com/a/41465905/6466378

問題は、あなただけ追加することはできませんあるdata-toggle="collapse"とdata-target="#navbar"あなたのA要素に。また、jQueryは、AureliaまたはAngular環境では機能しません。

私にとっての最善の解決策は、対応するメディアクエリをリッスンし、data-toggle="collapse"必要に応じて属性に追加するカスタム属性を作成することでした。

<a href="#" ... collapse-toggle-if-less768 data-target="#navbar"> ...

Aureliaのカスタム属性は次のようになります。

import {autoinject} from 'aurelia-framework';

@autoinject
export class CollapseToggleIfLess768CustomAttribute {
  element: Element;

  constructor(element: Element) {
    this.element = element;
    var mql = window.matchMedia("(min-width: 768px)");
    mql.addListener((mediaQueryList: MediaQueryList) => this.handleMediaChange(mediaQueryList));
    this.handleMediaChange(mql);
  }

  handleMediaChange(mediaQueryList: MediaQueryList) {
    if (mediaQueryList.matches) {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (dataToggle) {
        this.element.attributes.removeNamedItem("data-toggle");
      }
    } else {
      var dataToggle = this.element.attributes.getNamedItem("data-toggle");
      if (!dataToggle) {
        var dataToggle = document.createAttribute("data-toggle");
        dataToggle.value = "collapse";
        this.element.attributes.setNamedItem(dataToggle);
      }
    }
  }
}

私は、Bootstrap 4を使用しており、固定されたトップナビゲーションでfullPage.jsを使用して、ここに記載されているすべてを試しましたが、結果はさまざまです。

• 最高のクリーンな方法を試しました：

  data-toggle="collapse" data-target=".navbar-collapse.show"

  メニューは折りたたまれますが、hrefリンクはどこにもつながりません。

• 論理的な他の方法を試しました：

  $('myClickableElements').on('click touchstart', function(){
    $(".navbar-collapse.show").collapse('hide');
    // or
    $(".navbar-collapse.show").collapse('toggle');
    // or
    $('.navbar-toggler').click()
  });

  touchstartイベントのため、奇妙な動作が発生します。クリックされたボタンは、実際にクリックしたボタンではなく、リンクが壊れます。さらに、それは.showクラスを私のナビゲーションの他の無関係なドロップダウンに追加し、さらに奇妙なものを引き起こします。

• divをliに変更しようとしました
• e.preventDefault（）とe.stopPropagation（）を試しました
• もっと試してみました

何もうまくいきません。

だから、代わりに、私はそれをするという（これまでのところ）素晴らしいアイデアを持っていました：

$(window).on('hashchange',function(){
   $(".navbar-collapse.show").collapse('hide');
});

私はすでにそのhashchange関数にものを持っています、私はちょうどこの行を追加しなければなりませんでした。

それは実際に私が望んでいることを正確に実行します：ハッシュが変更されたときにメニューを折りたたみます（つまり、どこか他の場所へのクリックが発生した）。これは良いことです。メニューにリンクが表示され、折りたたまれないためです。

多分これは私の状況で誰かを助けるでしょう！

そして、そのスレッドに参加したすべての人に感謝します。ここで学ぶべき多くの情報があります。

ほとんどの場合、トグルボタンが表示されている場合にのみ、トグル関数を呼び出します。

if ($('.navbar-toggler').is(":visible")) $('.navbar-toggler').click();

私がチェックインしたメニューは、「in」クラスをチェックして開いてから、コードを実行します。

$('.navbar-collapse a').on('click', function(){
    if ( $( '.navbar-collapse' ).hasClass('in') ) {
        $('.navbar-toggle').click();
    }
});

完璧に動作します。