【发布时间】：2021-09-05 22:23:08
【问题描述】：
我正在尝试在 div 内放置一个下拉菜单，该下拉菜单将在鼠标悬停时打开，但我无法使其工作。下拉菜单将出现在复选框旁边（复选框右侧），它们将共享相同的样式。
我正在使用bootstap.js 3.2
请问我该怎么做？这就是我能走多远......老实说，它不一定是基于引导的......
<!DOCTYPE html>
<html>
<head>
<!--jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!--bootsrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.map-content {
position: absolute;
z-index: 1000;
padding: 4px 7px 5px;
border-top: 1px solid #777;
border-left: 1px solid #777;
border-right: 2px solid #444;
border-bottom: 2px solid #444;
line-height: 1.6;
font-size: 1em;
background: white;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="form-group">
<div class="map-content" id="id_1">
<div class="checkbox" style="margin-top: 1px; margin-bottom: 1px;">
<label>
<input id="mtoggle" onclick=myfunction(); type="checkbox">
Hide map
</label>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<li><a class="dropdown-item" href="#" onclick='dispatcher("default")'>default</a></li>
<li><a class="dropdown-item" href="#" onclick='dispatcher("case_1")'>case 1</a></li>
<li><a class="dropdown-item" href="#" onclick='dispatcher("case_2")'>case 2</a></li>
</div>
</div>
</div>
</div>
<script>
function myfunction() {
console.log('Hello from checkbox')
}
function dispatcher() {
console.log('Hello from dispatcher')
}
</script>
</body>
</html>【问题讨论】：
-
跟 JavaScript 有关系吗？我认为这更接近 css 风格。
-
好的，标签已移除，谢谢
标签： html css twitter-bootstrap twitter-bootstrap-3