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