所以我无法正常使用下拉菜单。下拉菜单的第一级工作正常，但是我没有打开子菜单，当我单击它时，它只是关闭菜单而不更改任何内容。
下面是我正在使用的代码，而未显示的子菜单部分是包含“添加项目”，“编辑项目”和“删除项目”的列表
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Admin</a>
<div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuLink">
<ul className="nav navbar-nav">
<li class="nav-item">
{/* This Line will hold the link to the User Management page */}
<a className="dropdown-item " href="#"><Link to={'/missionReports'} className="nav-link">Mission Reports</Link></a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> Data Management </a>
<ul class="dropdown-menu">
<li><a className="dropdown-item " href="#"><Link to={'/AddInfo'} className="nav-link">Add Item</Link></a></li>
<li><a className="dropdown-item" href="#"><Link to={'/EditInfo'} className="nav-link">Edit Item</Link></a></li>
<li><a className="dropdown-item" href="#"><Link to={'/DeleteInfo'} className="nav-link">Delete Item</Link></a></li>
</ul>
</li>
</ul>
</div>
</div>```
答案 0 :(得分：0)
这是一个多层子菜单下拉菜单。它为我工作。请检查并告知我。
根据CSS更改CSS。根据您的需要。
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
if ($(window).width() < 992) {
$('.dropdown-menu a').click(function(e){
e.preventDefault();
if($(this).next('.submenu').length){
$(this).next('.submenu').toggle();
}
$('.dropdown').on('hide.bs.dropdown', function () {
$(this).find('.submenu').hide();
})
});
} .nav-item, .dropdown-item{
background-color: lightgrey !important;
color: black !important;
padding: 5px !important;
}
.nav-item:hover, .dropdown-item:hover{
background-color: grey !important;
color: white !important;
padding: 5px !important;
}
a{
text-decoration: none !important;
color: black !important;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark">
<button class="navbar-toggler text-danger bg-white" type="button" data-toggle="collapse" data-target="#main_nav">My Multi-Layer Dropdown
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav list-unstyled">
<li class="nav-item">
<a class="nav-link" href="#">First Level Item 1 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">First Level Item 2 </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="true"> First Level Item 3
<span class="caret"></span>
</a>
<ul class="dropdown-menu list-unstyled">
<li><a class="dropdown-item" href="#">Second Level Item 3.1 </a> </li>
<li>
<a class="dropdown-item" href="#">Second Level Item 3.2
<span class="caret"></span>
</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="">Third Level Item 3.2.1</a></li>
<li>
<a class="dropdown-item" href="">Third Level Item 3.2.2
<span class="caret"></span>
</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="">Forth Level Item 3.2.2.1</a></li>
<li><a class="dropdown-item" href="">Forth Level Item 3.2.2.2</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="">Third Level Item 3.2.3</a></li>
<li><a class="dropdown-item" href="">Third Level Item 3.2.4</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Second Level Item 3.3 </a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
答案 1 :(得分：0)
我已经尝试过，两者都是正确的。使用和更改CSS。我已经做好了 仅适用于工作子菜单下拉菜单。两者都是相同的，只是它们有些微小的变化。 >希望您也一样。让我知道。
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
if ($(window).width() < 992) {
$('.dropdown-menu a').click(function(e){
e.preventDefault();
if($(this).next('.submenu').length){
$(this).next('.submenu').toggle();
}
$('.dropdown').on('hide.bs.dropdown', function () {
$(this).find('.submenu').hide();
})
});
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="list-unstyled">
<li class="nav-item dropdown">
<a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="true"> Multiple submenu dropdown </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Dropdown item 1 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 2 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="">Submenu item 1</a></li>
<li><a class="dropdown-item" href="">Submenu item 2</a></li>
<li><a class="dropdown-item" href="">Submenu item 3 » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="">Multi level 1</a></li>
<li><a class="dropdown-item" href="">Multi level 2</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="">Submenu item 4</a></li>
<li><a class="dropdown-item" href="">Submenu item 5</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Dropdown item 3 </a></li>
<li><a class="dropdown-item" href="#"> Dropdown item 4 </a>
</li></ul>
</li>
</ul>
</div>
</body>
</html>