提问人：AvaTaylor 提问时间：11/13/2023 最后编辑：isherwoodAvaTaylor 更新时间：11/13/2023 访问量：30
为什么单击齿轮图标时没有显示我的 Bootstrap 下拉菜单？
Why isn't my Bootstrap dropdown menu appearing when I click the gear icon?
问：
我正在尝试在单击时显示齿轮图标和下拉菜单。
这是我的代码，但下拉菜单没有出现。
任何想法我做错了什么？
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery 3.4.1 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Bootstrap 3.4.1 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap 3.4.1 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<div class="dropdown">
<h4>
Drop down menu test: <i class="bi bi-gear" style="cursor: pointer;" data-toggle="dropdown"></i>
</h4>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<!-- Add more menu items as needed -->
</ul>
</div>
</body>答：
0赞
isherwood
11/13/2023
#1
您有一些与文档不一致的东西和良好的语义标记：
- 切换器应该是一个按钮。标题不是可点击的元素，不应将其用作辅助功能。
- 下拉菜单必须是其切换器的下一个同级菜单。这意味着将其放在标题元素中。不幸的是，从语义的角度来看，这也是不好的，所以请考虑重构你的布局来解决这个问题。
- 不要省略文档中显示的 ARIA 属性，这也是为了辅助功能。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery 3.4.1 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Bootstrap 3.4.1 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap 3.4.1 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<div class="dropdown">
<h4>
Drop down menu test: <button id="dropdownBtn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="bi bi-gear"></i></button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBtn">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</h4>
</div>
</body>评论
0赞
AvaTaylor
11/13/2023
真棒！谢谢你弄清楚这一点！您是否碰巧知道需要更改哪些内容才能使菜单直接显示在齿轮图标下方？
0赞
AvaTaylor
11/13/2023
好的 -- 我有适合我的东西......我发布了我的“最终”代码作为答案 - 非常感谢这里的帮助！现在好多了。
0赞
AvaTaylor
11/13/2023
#2
这是我的“最终”代码，其中包含@isherwood更改
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery 3.4.1 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- Bootstrap 3.4.1 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Bootstrap 3.4.1 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- bootstrap icons from here: https://blog.getbootstrap.com/2021/01/07/bootstrap-icons-1-3-0/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<div class="d-flex align-items-center">
<h4 style="display: inline;">Drop down menu test:</h4>
<div class="dropdown" style="display: inline-block;" >
<button id="dropdownBtn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="bi bi-gear"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownBtn">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</div>
</body>
评论