我有一个 bootstrap 下拉菜单，它在悬停时打开(根据需要)，但我无法在单击时关闭它。具体来说，我希望在做出选择后关闭下拉菜单。请问我该怎么做？请注意，选择反射(reflect)在下拉菜单文本中(这很好)，但下拉菜单本身保持打开状态。
附上我的代码，由于某些我不理解我正在谈论的下拉菜单的原因，在运行下面的代码片段后进入全屏时会出现，否则只有 nav-bar header 是显示。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<!--jquery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!--d3 -->
<script src='https://d3js.org/d3.v4.min.js'></script>
<style>
/*Show/hide dropdown menu on mouse hover*/
.dropdown:hover > .dropdown-menu {
display: block;
}
/*Styling on the navbar*/
.navbar-inverse {
background-color: #3d4a57;
border-color: #333;
}
.navbar-inverse .navbar-nav > li > a,
.navbar a.navbar-brand {
color: #fbfbfb;
text-decoration: none;
}
</style>
</head>
<body class="application" id="body">
<!-- main page container, holding the nav tabs and content -->
<div id="container">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Some title</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown" id="myDropdown">
<a href="#" class="myDropdown dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
Select Data
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" onclick='myDropdownSelector("Dataset 1")'>Dataset 1</a></li>
<li><a class="dropdown-item" href="#" onclick='myDropdownSelector("Dataset 2")'>Dataset 2</a></li>
<li><a class="dropdown-item" href="#" onclick='myDropdownSelector("Dataset 3")'>Dataset 3</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown" id="dropdown-inefficiency">
<a href="#" class="dropdown-valueSetter dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
Intensity Value
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" onclick='set_value("1.0")'>1.0</a></li>
<li><a class="dropdown-item" href="#" onclick='set_value("2.0")'>2.0</a></li>
<li><a class="dropdown-item" href="#" onclick='set_value("3.0")'>3.0</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</div>
</div>
<script>
function myDropdownSelector(x){
d3.select('.myDropdown').node().text = x + ' ';
$('.myDropdown').append("<span class='caret'></span>");
}
function set_value(x){
d3.select('.dropdown-valueSetter').node().text = 'Value: ' + x + ' '
$('.dropdown-valueSetter').append("<span class='caret'></span>");
}
</script>
</div>
</body>
</html>最佳答案
您正在使用一个大脚本 (d3.v4.min.js) 为您在 JavaScript 中进行一些下拉处理。请引用following如果您想在以后提问时看到更具体的答案。
我尝试使用简单的 jQuery 来根据您的要求进行操作，结果是显示和隐藏某些下拉列表:
function myDropdownSelector(x) {
d3.select('.myDropdown').node().text = x + ' ';
$('.myDropdown').append("<span class='caret'></span>");
}
function set_value(x) {
d3.select('.dropdown-valueSetter').node().text = 'Value: ' + x + ' '
$('.dropdown-valueSetter').append("<span class='caret'></span>");
}
//Rather use jQuery DOM ready function to execute DOM manipulation over regular JavaScript
$(document).ready(function() {
$(".nav.navbar-nav .dropdown-menu").on("click", ".dropdown-item", function() {
$(".dropdown-menu").hide();
});
$(".nav.navbar-nav .dropdown > a#foo").hover(function() {
$(".dropdown-menu#bar").show();
});
$(".nav.navbar-nav .dropdown > a#alpha").hover(function() {
$(".dropdown-menu#beta").show();
});
});/* Show/hide dropdown menu on mouse hover */
.dropdown:hover > .dropdown-menu {
display: block;
}
/* Styling on the navbar */
.navbar-inverse {
background-color: #3d4a57;
border-color: #333;
}
.navbar-inverse .navbar-nav > li > a,
.navbar a.navbar-brand {
color: #fbfbfb;
text-decoration: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="application" id="body">
<!-- main page container, holding the nav tabs and content -->
<div id="container">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Some title</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown" id="myDropdown">
<a href="#" class="myDropdown dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="alpha">
Select Data
<span class="caret"></span>
</a>
<ul class="dropdown-menu" id="beta">
<li><a class="dropdown-item" href="#" onclick='myDropdownSelector("Dataset 1")'>Dataset 1</a></li>
<li><a class="dropdown-item" href="#" onclick='myDropdownSelector("Dataset 2")'>Dataset 2</a></li>
<li><a class="dropdown-item" href="#" onclick='myDropdownSelector("Dataset 3")'>Dataset 3</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown" id="dropdown-inefficiency">
<a href="#" class="dropdown-valueSetter dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="foo">
Intensity Value
<span class="caret"></span>
</a>
<ul class="dropdown-menu" id="bar">
<li><a class="dropdown-item" href="#" onclick='set_value("1.0")'>1.0</a></li>
<li><a class="dropdown-item" href="#" onclick='set_value("2.0")'>2.0</a></li>
<li><a class="dropdown-item" href="#" onclick='set_value("3.0")'>3.0</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</div>
</div>
</div>
</div>选择完成后，下拉菜单将关闭。这应该可以根据您的要求解决您的(客户端)问题。
关于jquery - Bootstrap 下拉菜单。悬停时打开，但如何在点击时关闭？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55374417/