如何使汉堡菜单显示下拉列表

Question

我正在学习 Bootstrap 4，我已经成功地将导航栏中的内容变成了我想要的较小屏幕尺寸的汉堡包菜单。我运行现在遇到的问题是，成为汉堡菜单的其中一件事是浏览按钮，它在更大的屏幕尺寸下显示下拉列表：

它确实变成了较小屏幕尺寸的汉堡菜单，但是当我单击汉堡菜单时，浏览按钮出现在它的右侧，这并不是我想要发生的事情：

我试图消除在较小屏幕尺寸下的点击，并让汉堡菜单在点击时直接显示下拉列表，而不是必须先点击汉堡菜单，然后点击弹出的浏览按钮。

这是我的 HTML:

<!-- browse button hamburger menu button -->
<a class="navbar-toggler border" role="button" data-toggle="collapse" data-target="#navbarBrowseButton">
    <span class="navbar-toggler-icon text-center">
        <i class="fas fa-bars"></i>
    </span>
</a>

<!-- browse button collapse content -->
<div class="collapse navbar-collapse" id="navbarBrowseButton">
    <a class="btn btnBrowse dropdown-toggle" role="button" data-toggle="dropdown">Browse</a>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">Games</a>
            <a href="#" class="dropdown-item">Popular Lists</a>

为了简单起见，我去掉了 ARIA 的东西，我尝试给我的 dropdown-menu 一个 id 并更改 data-target 并取得了不同程度的成功，但它现在仍然按照我想要的方式工作。

Answer 1

你可以用JS来做。

已添加 bg-dark navbar-dark 类用于显示切换器。

$('#navbarBrowseButton').on('shown.bs.collapse', function() {
  $('#navbarBrowseButton .btnBrowse').click();
});

$('#navbarBrowseButton').on('hidden.bs.collapse', function() {
  $('#navbarBrowseButton').collapse('hide');
  $('#navbarBrowseButton').dropdown('hide');
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- browse button hamburger menu button -->
<a class="navbar-toggler border bg-dark navbar-dark" role="button" data-toggle="collapse" data-target="#navbarBrowseButton">
  <span class="navbar-toggler-icon text-center">
            <i class="fas fa-bars"></i>
        </span>
</a>

<!-- browse button collapse content -->
<div class="collapse navbar-collapse" id="navbarBrowseButton">
  <a class="btn btnBrowse dropdown-toggle" role="button" data-toggle="dropdown">Browse</a>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Games</a>
    <a href="#" class="dropdown-item">Popular Lists</a>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

如何使汉堡菜单显示下拉列表

How to make a hamburger menu show a dropdown list

hamburger-menu

bootstrap-4