html – 不会弹出bootstrap下拉列表

2023年8月4日 134次阅读

我在
HTML中用Bootstrap创建了一个下拉菜单.出现按钮,插入符也是如此.但菜单没有弹出.这是我的代码：

.dropdown {
  color: #666666;
  font-size: 11px;
}
.dropdown .btn-default {
  background: #f2f2f2;
  color: black;
  border: none;
  border-radius: 0px;
  width: 150px;
  height: 20px;
  padding-top: 3px;
  margin-top: -2px;
  margin-bottom: 3px;
  font-size: 11px;
}
.dropdown .btn-default,
.dropdown .btn-default:focus {
  background-color: coral;
  color: black;
}
.dropdown .btn-default:active,
.dropdown .btn-default .dropdown-toggle:active,
.dropdown .btn-default:hover {
  background-color: coral;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown">
  Lingua
  <button class=" btn btn-default " type="button" data-toggle="dropdown">
    <img class="dropdwn_img" src="http://64.64.216.18/images/photos/italy-flag.png">Italiano
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <img class="dropdwn_img" src="http://64.64.216.18/images/photos/italy-flag.png">Italia</li>
    <li>
      <img class="dropdwn_img" src="http://www.geysir-andernach.de/navigation2012/flag_2.png">England</li>
  </ul>
</div>

我做错了什么或者我应该改变一些东西？谢谢！
下面的答案确实有帮助,但我有2个下拉按钮,每个按钮的菜单出现在第一个下拉按钮下.我该如何解决这个问题？
以下是2个下拉菜单：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown">
  Lingua
  <button class=" btn btn-default " type="button" data-toggle="dropdown">
    <img class="dropdwn_img" src="images/flag.png">Italiano
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <img class="dropdwn_img" src="images/flag.png">Italia</li>
    <li>
      <img class="dropdwn_img" src="images/flag.png">England</li>
  </ul>

  Paese
  <button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">
    <img class="dropdwn_img" src="images/flag.png">Italia
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <img class="dropdwn_img" src="images/flag.png">Italia</li>
    <li>
      <img class="dropdwn_img" src="images/flag.png">England</li>
  </ul>
</div>

最佳答案 您错过了关闭下拉列表并创建新的下拉列表.

在文本Paese之前添加以下代码

</div>
<div class="dropdown">

注意：您似乎缺少bootstrap和jQuery引用.在下面引用HTML的head部分.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

工作代码：

.dropdown {
  color: #666666;
  font-size: 11px;
  display: inline;
}
.dropdown .btn-default {
  background: #f2f2f2;
  color: black;
  border: none;
  border-radius: 0px;
  width: 150px;
  height: 20px;
  padding-top: 3px;
  margin-top: -2px;
  margin-bottom: 3px;
  font-size: 11px;
}
.dropdown.btn-default,
.dropdown.btn-default:focus {
  background-color: coral;
  color: black;
}
.dropdown.btn-default:active,
.dropdown.btn-default.dropdown-toggle:active,
.dropdown.btn-default:hover {
  background-color: coral;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="dropdown">
  Lingua
  <button class=" btn btn-default " type="button" data-toggle="dropdown">
    <img class="dropdwn_img" src="images/flag.png">Italiano
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <img class="dropdwn_img" src="images/flag.png">Italia</li>
    <li>
      <img class="dropdwn_img" src="images/flag.png">England</li>
  </ul>
</div>
<div class="dropdown">
  Paese
  <button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">
    <img class="dropdwn_img" src="images/flag.png">Italia
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li>
      <img class="dropdwn_img" src="images/flag.png">Italia</li>
    <li>
      <img class="dropdwn_img" src="images/flag.png">England</li>
  </ul>
</div>
点赞