Question

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您错过了关闭下拉列表并创建新的下拉列表。

在文字 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>

Answer 2

首先尝试从CDN或系统本地添加参考文件。

引导下拉列表不会弹出

2 个答案: