navbarのブートストラップドロップダウンが機能しません

ブートストラップコンポーネントページからコードをコピーするだけでも、このNavbarのドロップダウンが機能しません。私はスクリプトのタグと他のものを整理するような多くのソリューションを試しましたが、まだ動作しません。navbarのブートストラップドロップダウンが機能しません

<html> 
    <head> 
     <title> This is homepage </title> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
     <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="<?php echo base_url('css/style.css');?> "> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
     <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
    </head> 
    <body> 
     <nav class="navbar navbar-default navbar-static-top"> 
      <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#"> 
       <img alt="Brand" src="#"> 
       </a> 
      </div> 
      <div class="collapse navbar-collapse" id="navbar-collapse"> 
       <ul class="nav navbar-nav"> 
       <li><a href="#"> Home </a></li> 
       <li><a href="#"> Home </a></li> 
       <li><a href="#"> Home </a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 2</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Link 3</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Link 4</a></li> 
        </ul> 
       </li> 
       </ul> 
       <form class="navbar-form navbar-right" role="search"> 
       <div class="form-group"> 
        <input type="text" class="form-control" placeholder="Type Here To Search"> 
       </div> 
       <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> </button> 
       </form> 
      </div> 
      </div> 
     </nav> 
    </body> 
</html>

あなたは、私はすでにコードのJavaScript、jQueryとCSSを入れて、そのはまだ動作しません見ることができます。助けてください。

出典

2016-07-05 Wahyu Handy

ブートストラップjsの前にjqueryを入れて、もう一度やり直してください.jqueryのバージョンが1.9.1を上回っています。 – bhansa

私の答えをチェックしてください。 – bhansa

@ Bhansaありがとうございました問題は、jqueryのバージョン内です。私はそれをjquery 2.2.4とその仕事に変更しようとしました。ありがとうございました –

jquery.min.jsの前にbootstrap.min.jsをロードし、ブートストラップがjQueryに依存するという問題があります。その結果、定義されていない機能についてコンソールにエラーが表示されます。

また、Bootstrap's bower.jsonによれば、jQueryバージョン3はサポートされていません。代わりにバージョン2. *を使用してください。

単に変更：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

へ：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

出典

2016-07-05 14:10:18

私はすでに2つを切り替えていますが、ドロップダウンはまだ動作しません。 –

jQueryのバージョンを変更するための答えを更新しました。 jQueryのバージョンを '2.2.4'に変更してみてください。 –

ええ、私はすでにそれを試みました。お返事ありがとうございました –

<html> 
 
    <head> 
 
     <title> This is homepage </title> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
     <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
     <link rel="stylesheet" type="text/css" href="<?php echo base_url('css/style.css');?> "> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 
     <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
 
    </head> 
 
    <body> 
 
     <nav class="navbar navbar-default navbar-static-top"> 
 
      <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
       <a class="navbar-brand" href="#"> 
 
       <img alt="Brand" src="#"> 
 
       </a> 
 
      </div> 
 
      <div class="collapse navbar-collapse" id="navbar-collapse"> 
 
       <ul class="nav navbar-nav"> 
 
       <li><a href="#"> Home </a></li> 
 
       <li><a href="#"> Home </a></li> 
 
       <li><a href="#"> Home </a></li> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
        <li><a href="#">Link 1</a></li> 
 
        <li><a href="#">Link 2</a></li> 
 
        <li role="separator" class="divider"></li> 
 
        <li><a href="#">Link 3</a></li> 
 
        <li role="separator" class="divider"></li> 
 
        <li><a href="#">Link 4</a></li> 
 
        </ul> 
 
       </li> 
 
       </ul> 
 
       <form class="navbar-form navbar-right" role="search"> 
 
       <div class="form-group"> 
 
        <input type="text" class="form-control" placeholder="Type Here To Search"> 
 
       </div> 
 
       <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> </button> 
 
       </form> 
 
      </div> 
 
      </div> 
 
     </nav> 
 
    </body> 
 
</html>

出典

2016-07-05 14:15:59 bhansa

上記のコメントにあなたが書いていることを知っていますが、OPによって投稿されたコードからどのような変更を加えたかについてコメントを付けることができますか？ – PakkuDon

@PakkuDonそれは私がコメントそのものに言及した理由を知っていますが、まだ彼は解を得ていないので、スニペットを提供しなければなりません。 – bhansa

@bhansaありがとうございました。私は既に上記の私のコメントを編集しましたが、あなたはすでにコードスニペットを投稿しました：D と私はすでに下の私の答えを掲載しました –

問題は、jQueryのバージョンの範囲内です。私は

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

に変更しようとしました。どうもありがとうございました。

出典

2016-07-05 14:24:27

navbarのブートストラップドロップダウンが機能しません

答えて

関連する問題