Navbarの折りたたみがブートストラップで機能しない

@Bhanu pratapが問題を解決しました。この質問の終わりにそれをチェックしてください。Navbarの折りたたみがブートストラップで機能しない

私はnavbar collapse（サンドイッチ）を構築するための古いコースに従っています。問題は、コースのページの上に黒いバーが表示され、ページを縮小するときにnavbarが表示されることです。私のために、私はちょうど左のボタンを取得します。また、私はページを縮小するとき、私はnavbarを取得しません。ここ

ソースコードです：

<!DOCTYPE html> 
<html lang="arabic"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

    <meta charset="utf-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <meta name="description" content=""> 

    <meta name="author" content=""> 

    <link rel="icon" herf="assets/img/favicon.ico"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="assets/js/jquery-3.1.1.min.js"></script> 
    <script src="assets/js/main.js"></script> 

    <!-- Bootstrap core CSS --> 
    <link href="assets/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Font-Awesome icons--> 
    <link href="assets/css/font-awesome/css/font-awesome.min.css"> 

    <!-- Google Fonts LATEEF --> 
    <link href="https://fonts.googleapis.com/css?family=Changa:400,600&amp;subset=arabic,latin-ext" rel="stylesheet"> 

    <title>Bootstrap to Wordpress</title> 




     <!-- 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.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 

    </head> 

    <body> 

    <!-- HEADER --> 
    <header class="site-header" role="banner"> 

     <!-- NAVBAR --> 
     <div class="navbar-wrapper"> 
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 

        <div class="container"> 
         <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
          <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" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a> 
         </div><!-- navbar-header --> 
         <div class="navbar-collapse collapse"> 

         </div><!-- collapse nav--> 
        </div><!-- container --> 

      </div><!-- navbar --> 


     </div><!-- navbar-wrapper--> 


    </header> 

    <!-- FOOTER TAG --> 
    <footer> 

    </footer> 

    <!-- MODAL --> 
    <div> 

    </div> 

    <!-- BOOTSTRAP CORE JAVASCRIPT 
      PLACED AT THE END OF THE DOCUMENT SO THE PAGES 
      LOAD FASTER! 
    ================================================== --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="assets/js/jquery-3.1.1.min.js"></script> 
    <script src="assets/js/main.js"></script> 

    <!-- Type google font --> 
    <script src="https://use.typekit.net/byz5vqz.js"></script> 
    <script>try{Typekit.load({ async: true });}catch(e){}</script> 

    </body> 
</html>

私は別のソースコードで、この部分を変更しようとした、まだ問題が再び発生します。

UPDATE： @Bhanu pratap可視効果を示すためにアドインUL及びLiによってpropblemを解決しました。ここで彼のソースコードです：.. ..私はちょうどあなたがあなたのコードセクションを使用することができます目に見える効果を示すために、あなたのコードにULおよびLiを追加した

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 


<div class="navbar-wrapper"> 
     <div class="navbar navbar-inverse 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-collapse"> 
         <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" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a> 
       </div><!-- navbar-header --> 
       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li> 
          <a href="">First Menu Item</a> 
         </li> 
         <li> 
          <a href="">Second Menu Item</a> 
         </li> 
         <li> 
          <a href="">Third Menu Item</a> 
         </li> 
        </ul> 
       </div><!-- collapse nav--> 
      </div><!-- container --> 

     </div><!-- navbar --> 
    </div>

出典

2016-11-27 Who knows

ご使用のjQuery 3.1とブートストラップはjqueryの2歳以下が必要です。以前のバージョンのjqueryを使ってみてください –

私はjquery 2に変更しましたが、私はまだ同じ問題を抱えています。 –

これを試してみてください

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="navbar-wrapper"> 
 
     <div class="navbar navbar-inverse 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-collapse"> 
 
         <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" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a> 
 
       </div><!-- navbar-header --> 
 
       <div class="navbar-collapse collapse"> 
 
        <ul class="nav navbar-nav"> 
 
         <li> 
 
          <a href="">First Menu Item</a> 
 
         </li> 
 
         <li> 
 
          <a href="">Second Menu Item</a> 
 
         </li> 
 
         <li> 
 
          <a href="">Third Menu Item</a> 
 
         </li> 
 
        </ul> 
 
       </div><!-- collapse nav--> 
 
      </div><!-- container --> 
 

 
     </div><!-- navbar --> 
 
    </div>

出典

2016-11-27 18:26:29

$(document).on('click','.navbar-collapse.in',function(e) { 
    if($(e.target).is('a') && ($(e.target).attr('class') != 'dropdown-toggle')) { 
    $(this).collapse('hide'); 
} }); 

$("button.navbar-toggle").click(function (e) { 
    $("#main-navbar").collapse('hide'); 
    $("#main-navbar").removeClass("in"); });

出典

2016-12-21 16:59:21 pabloRN

Navbarの折りたたみがブートストラップで機能しない

答えて

関連する問題