Question

引导程序下拉列表不起作用。单击下拉按钮没有任何反应。下拉模板已直接从引导文档中复制。我尝试更改脚本（引导程序，jquery和javascript）和顺序。但是，它仍然无法正常工作。该代码以角度形式运行。

HTML代码

<!DOCTYPE HTML>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    </head>

    <body>
        <nav class="navbar navbar-fixed-top navbar-expand-sm">

            <a class="navbar-brand" href="#">
                <img width="30" height="30" class="images d-inline-block align-top" src="https://cdn.coinranking.com/bOabBYkcX/bitcoin_btc.svg" class="img-fluid"/>
                Crypto Currency Tool
            </a>         
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
                        
            <div class="collapse navbar-collapse" id="navigation">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                  <a class="nav-link" href="markets">Market</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="buy">Buy</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="sell">Sell</a>
                </li>
              </ul>
            </div>
          </nav>

          <div class="container-fluid root">
              <div class="row">
                  <div class="col-sm-12">
                      <p class="moneys">Available Training Money - {{ moneys | currency: "EUR": true }}</p>
                  </div>
              </div>
          </div>
          
          <div class="container-fluid others">
              <div class="row">
                  <div class="col-sm-6">
                      <h2>Buy Crypto Currency</h2>
                  </div>
              </div>
              <div class="row">
                  <div class="col-sm-6">
                      <div class="dropdown">
                          <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              Select Currency
                          </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>
                      <label for="quantity" class="quantity"></label>
                      <input type="text" class="quantity" placeholder="Quantity">
                      <button type="submit" class="btn btn-primary buy">Buy</button>
                  </div>
              </div>
          </div>
    </body>
</html>

CSS代码

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
}

.images {
    width: 20px;
}

.navbar {
    background-color: white;
}

.container-fluid {
    margin-top: 10px;
    border: 10px solid black;
}

.moneys {
    float: right;
    color: white;
}

.others {
    background-color: #e0e0eb;
    height: 300px;
    padding-top: 70px;
    margin: 10px auto;
    border-radius: 20px;
}

.dropdown {
    display: inline;
    margin-right: 40px;
}

.quantity {
    height: 40px;
}

.buy {
    margin-left: 40px;
}

单击按钮时，引导程序下拉列表不起作用

0 个答案: