web-dev-qa-db-ja.com

クリックでTwitterのブートストラップナビゲーションを折りたたむ

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

enter image description here

レスポンシブメニューからカテゴリを選択することで（テンプレートは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 -->
jqueryhtmltwitter-bootstrap
130
Tim Vitor

これを試して：

$('.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
});
158
WooCaSh

このように各リンクに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>

Bootstrap 4 Navbar では、inがshowに変更されたため、構文は次のようになります。

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

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

デフォルトのcollapse.jsメソッドを使用することをお勧めします（ V3 docs 、 V4 docs ）。

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

コードを少しも使わずにもっとエレガントにするには、nav自体に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要素が太い指のための十分なパディングを持っていて、そしてユーザーがnav aアイテムをクリックしたときにe.stopPropagation()を介してクリックイベントのバブリングを妨げていない限り、うまくいきます。

30
purefusion

あなたを更新する

<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/901

16
FullStackDev

Bootstrap 3.3.6でテスト済み - 動作しました。

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

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

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

$(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');
        }
  });

});
13
Charlie Dalsass

これを試してください> Bootstrap 3

まさに私が探していたものは素晴らしかったが、javascriptとbootstrapモーダルとの衝突がいくつかあったので、修正した。

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

お役に立てれば。

7
Getsomepeaches
$('.nav a').click(function () {
    $('.navbar-collapse').collapse('hide');
});
5
Jagdish Singh

これは私にとってはうまくいった。それは受け入れられた答えと同じですが、デスクトップ/タブレットビューに関連した問題を修正します

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

以下に示すように、デフォルトのBootstrap 3の collapse.jsメソッド 非表示にしたい折りたたみ可能な要素として.navbar-collapseを使用することをお勧めします。

他の解決策は、要素があなたのWebページに表示または機能する方法に他の望ましくない問題を引き起こすかもしれません。したがって、最初の問題を解決するための解決策がいくつかあるかもしれませんが、他の解決策を採用するとよい場合もありますので、修正後は必ずサイトの徹底的なテストを実行してください。

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

  1. 下記の "Run This Code Snippet"を押してください。
  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>
4
Franciscus Agnew

各ドロップダウンリンクに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;
  }
}
3
Botez Alexandru

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>
3
Arv

これが私のやり方です。なめらかな方法があれば教えてください。

メニューへのリンクがある<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>
2
user2502767

これが私が使った中で最高の解決策です。

$(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
        });

    });
1
Judson Terrell
$("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');
  }
});
1
טאבו ישראל שרות לקוחות

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

$('.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内でクリックされたリンクの上にドロップダウンクラスが存在する場合はそのドロップダウンクラスの存在を探し、そのリンクはドロップダウンメニューを起動しようとしていたため、メニューは非表示になりません。ドロップダウンメニュー内のリンクをクリックすると、ナビゲーションバーが正しく非表示になります。

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

//注私はモバイルタッチ用の「touchstart」を追加しました。 touchstart/endに遅れがない

1
APOUGHER

100％の作業： -

HTMLに追加

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

ジャバスクリプト

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

Bootstrap 3 *のもう1つの簡単な解決策は、次のとおりです。

$( 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
            }
        });
    });
});
0
Cristi Draghici

私は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');
});

私はすでにそのハッシュ変更関数に何かを持っていました、それで私はちょうどこの行を追加しなければなりませんでした。

それは実際に私が望むことを正確に行います。ハッシュが変わったときにメニューを折りたたむ（つまり、どこか他の場所へのクリックが発生した）。これは問題ありません。メニューに折りたたまれないリンクを表示できるようになりました。

誰が知っている、多分これは私の状況で誰かを助けるでしょう！

そして、そのスレッドに参加してくれた皆さんのおかげで、ここで学ぶべきたくさんの情報があります。

0
Paperjuice

それぞれに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>
0
james

ほとんどの場合、トグルボタンが表示されている場合にのみトグル機能を呼び出す必要があります。

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

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

デフォルトのブートストラップクラス.inがその要素に設定されているかどうかをチェックするためにifステートメントを実行するほうがおそらく速いです。

だからこのコードはただ言う：

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

$('#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');
    }
})
0
CR Rollyson

モバイルビュー：同じページ上のアンカー/ IDを指すナビゲーション項目を含むブートストラップ+ドロップダウン+ jquery + scrolltoでトグルナビゲーションを非表示にする方法、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" );
}

（上記の貢献者の一人に称賛）

このように（両方の巻物に同じものを追加する必要があります）

$('.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

0
Robert

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

問題はあなたがあなたのa要素にdata-toggle="collapse"とdata-target="#navbar"を単に追加することができないということです。そしてjQueryはAureliaやAngular環境ではうまくいきません。

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

<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);
      }
    }
  }
}
0
halllo

これは、アニメーション化するのではなくナビゲーションの折りたたみを非表示にしますが、上記の回答と同じ概念です。

JS：

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

HTML：

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

私は既にアニメーション化しているlocalScroll.jsを使っているので、私は単一ページのサイトでこれを好む。

0
andreaslarsen.dk

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);
0
Yash Vekaria