ブートストラップナビバー崩壊ボタンが機能しない

これは何千もの時間を要請されていることが分かりました。私は約1時間ほど前から同様の質問をしてきました。ブートストラップナビバー崩壊ボタンが機能しない

私のコードで何が問題になっているのかわかりません。どのソリューションを試しても問題ありません。私は急行のNode.jsアプリケーションのためのブートストラップ3を使用してい

<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale = 1"> 
    <title>{{ title }}</title> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    </head> 

    <body> 

    <nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target"#rtNavbar" aria-expanded="false"> 
     <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="#">TestApp01</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-collapse" id="rtNavbar"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact Us</a></li> 
       <form class="navbar-form navbar-right"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button> 
     </form> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 
<!-- Some more stuff here --> 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="  crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

：ここ

は、（ブートストラップドキュメント由来）私のプロジェクトでnavbarスニペットです。それが重要なのなら、私はホーガンのテンプレートを使っています。

出典

2016-10-01 Edward McKinzie

jQueryはNode.jsでも動作しますか？ navbarのjQueryとBootstrapのjsファイルを使用している場合は、[Bootstrap Without jQuery]（https://github.com/tagawa/bootstrap-without-jquery）をご覧ください。それはもっと軽量です。 –

<head> 
 
    <meta charset="UTF-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale = 1"> 
 
    <title>{{ title }}</title> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    </head> 
 

 
    <body> 
 

 
    <nav class="navbar navbar-default" role="navigation"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false"> 
 
     <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="#">TestApp01</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse navbar-collapse" id="rtNavbar"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Contact Us</a></li> 
 
       <form class="navbar-form navbar-right"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" placeholder="Search"> 
 
     </div> 
 
     <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true" /></button> 
 
     </form> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 
<!-- Some more stuff here --> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="  crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"

ただ、データ・ターゲットでこの変更を行います。なぜならブートストラップ3のthatsのは、現時点ではjQuery 3.0と互換性があり、超えていないしていない場合 https://gist.github.com/anonymous/916bb0286c966660121fecbafdd9140a

出典

2016-10-01 17:29:14

ブートストラップはjQuery 3と互換性がないため、jQuery 2を使用するか、jQueryの後にjQuery Migrateを組み込みます。

出典

2016-10-01 17:24:22 WaldemarIce

私はjQuery 2.2.4 CDNに切り替えましたが、まだ動作していません：/ –

変更あなたのデータは、この

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#rtNavbar" aria-expanded="false">

のようなその間違った試みをターゲットにしています。 Bootstrap 3で使用できるjQueryの最新バージョンは2.2.4です。

出典

2016-10-01 17:34:18

Please Look at At Answer Answer :) –

JSとjQueryがコードに埋め込まれる方法が問題の一部になることがあります。私は気づいた - 少なくとも、JSの場合 - 閉じる</script>タグがないことに気づいた。私はあなたの問題は、適切な場所にこれらのタグを持たず、適切に閉じられていないという単純なものかもしれないと思います。

私は<head>に以下の<script>追加を使用し、折りたたみボタンの機能を持っていましたので、<head>の中で試してみてください。 BootstrapのCSSリンクのすぐ下にこれらの2つのスクリプトを含まないようにすることも簡単です。これは、（ブートストラップ3）のようになります。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

はまた、あなたの<button>タグにdata-targetの問題を持っています。代わりにdata-target""#myNavbar"のようなものを使用してみてください。

もう1つは、バーの右揃えの要素に関する2番目の<div>の冗長navbar-collapseがあることです。これは水を濁らせ、問題を引き起こす可能性があります。それ以外の場合は、コード素材の残りの部分が良好に見えます。ちょうど<head>の上記のコードを宣言してみてください。がんばろう！

出典

2018-02-19 17:16:47 Taddes

ブートストラップナビバー崩壊ボタンが機能しない

答えて

関連する問題