102

ブートストラップ ドロップダウンを機能させることができません。これがnavのhtmlです：

<ul class='nav'>
  <li class='active'>Home</li>
  <li class='dropdown'>
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">asds</a></li>
      <li class="divider"></li>
    </ul>
  </li>
  <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>

そして、ここにスクリプトがあります：

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

私は何を間違っていますか？回答ありがとうございます。

4

26 に答える 26

176

私も同じ問題を抱えていました。数時間のトラブルシューティングの後、次のことがわかりました。

私が持っていた

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

それ以外の、

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

これが誰かを助けることを願っています

于 2014-06-01T22:08:03.140 に答える
98

2回含めたときも同じ問題がありbootstrap.min.jsました。それらの1つを削除すると、機能し始めました。

于 2014-07-10T10:27:53.213 に答える
25

参考までに、bootstrap.js がある場合は、bootstrap-dropdown.js を追加しないでください。

bootstrap.min.js の結果がよくわかりません。

于 2013-01-22T01:37:49.940 に答える
15

作業デモ：http ：//codebins.com/bin/4ldqp73

これを試して

<ul class='nav'>
  <li class='active'>Home</li>
  <li>
    <div class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">            
        <li><a href="#">asds</a></li>
        <li class="divider"></li>
      </ul>
    </div>   
    </li>
    <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>
于 2012-09-17T12:06:53.277 に答える
14

</head>あなたのスタイルのために、あなたはブートストラップのcssファイルを含める必要があります、一般的に要素の直前に

<link href="css/bootstrap.css" rel="stylesheet">

次に、jsファイルを含める必要があります。通常、</body>ページの読み込みが速くなる前に、ドキュメントの最後に含めることをお勧めします。

<script src="js/jquery.js"></script>        
<script src="js/bootstrap.js"></script>
于 2013-03-15T19:36:37.097 に答える
8

body タグ内に次の行を追加します。

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <!-- Include all compiled plugins (below), or include individual files 
        as needed -->
  <script src="js/bootstrap.min.js"></script>
于 2014-08-05T20:00:34.090 に答える
7

<head></head>このファイルをhtmlにインポートする必要があります。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
于 2014-06-27T03:22:35.467 に答える
5

含めました jquery.jsか？

また、このコード行を自分のコードと比較してください。

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>

正常に動作するこのバージョンを参照してください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap dropdown</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <a class="brand" href="#">w3resource</a>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">MySQL</a></li>
                            <li class="divider"></li>
                            <li><a href="#">JavaScript</a></li>
                            <li><a href="#">HTML5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
     <h1>Dropdown Example</h1>
    </div>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>
</body>
</html>
于 2012-09-17T12:05:29.593 に答える
4

これを行う最も簡単な方法は、https://www.bootstrapcdn.com/ にあるブートストラップ リンクの CDN と、ここにある Jquery CDN スクリプトをコピー アンドペーストするだけですhttps:// code.jquery.com/リンクをコピーすると、次の例のように、ブートストラップ リンクが HTML の先頭に貼り付けられ、Jquery スクリプトが HTML の本文に貼り付けられます。

    <!DOCTYPE html>
    <html>
      <head>

        <title>Purrfect Match Landing Page</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!--<link rel="stylesheet" href="griddemo.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

      </head>

      <body>

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">      </script>    
      </body>
    </html>

私にとっては完璧に機能します。それがあなたにとってもうまくいくことを願っています:)

于 2016-11-15T20:54:35.753 に答える
2

ここで私がしたことは.....

私のプロジェクトからbootstrap.min.jsを削除し、bootstrap.jsを追加すると、動作し始めました........

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js"
                  //"~/Scripts/bootstrap.min.js"));
于 2016-06-08T12:34:37.677 に答える
2

このコードを試してください：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap Tutorial</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <h1>Welcome to Bootstrap</h1>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
于 2019-08-20T06:26:48.027 に答える
1

私は同じ問題を抱えていたので popper.js ライブラリを確認してください。 https://getbootstrap.com/のドロップダウン用のブートストラップ、jquery、および popper CDN を見つける か、次のスクリプトタグをコピーしてください。

于 2020-02-29T21:21:03.003 に答える
-1

私はAngular 7、jQuery 3.4.1、Popper 1.12.9、およびBootstrap 4.3.1でセットアップしましたが、スタイルでこの小さなハックを行ったまで何も機能しませんでした:

.dropdown.show .dropdown-menu {
    opacity: 1 !important;
}

HTML は次のようになります。

<nav class="navbar navbar-expand-lg navbar-dark fixed-top py-1">
 <div class="container-fluid">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="dropdown-id"
                aria-expanded="false">Menu</button>
            <div class="dropdown-menu" aria-labelledby="dropdown-id">
                <a class="dropdown-item" [routerLink]='["/"]'>Main page</a>
                <a class="dropdown-item" [routerLink]='["/about"]'>About</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" [routerLink]='["/about/terms"]'>Terms</a>
                <a class="dropdown-item" [routerLink]='["/about/privacy"]'>Privacy</a>
            </div>
        </li>
     </ul>
  </div>
</nav>
于 2019-09-15T19:47:50.157 に答える