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

我正在学习Bootstrap4，我已经成功地将导航栏中的内容变成了小屏幕的汉堡包菜单，就像我想要的那样。我现在遇到的问题是，汉堡包菜单中的一个功能是浏览按钮，它以较大的屏幕显示下拉列表：

它确实变成了一个小屏幕的汉堡菜单，但当我点击汉堡菜单时，浏览按钮就出现在它的右边，这并不是我想要的：

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

这是我的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的东西，我尝试给我的

下拉菜单

一个id，并改变了

数据目标

，取得了不同程度的成功，但它现在仍在按照我的意愿工作。

你可以使用JS

添加了

bg dark导航栏dark

类，用于切换显示目的

$（'navbarBrowseButton'）.on（'show.bs.collapse'，function（）{
$（'#navbarBrowseButton.btnBrowse'）。单击（）；
});
$（'#navbarBrowseButton'）.on（'hidden.bs.collapse'，function（））{
$（'navbarBrowseButton'）。折叠（'hide'）；
$（“#navbarBrowseButton”）。下拉列表（'hide'）；
});

简而言之，您的小屏幕有问题，您需要的是当您单击汉堡菜单时，浏览是否有一个打开的菜单？是的，当您单击浏览按钮时会出现下拉菜单，这正是我希望在您单击汉堡菜单时发生的情况，我希望两次单击都能执行相同的操作，显示下拉菜单查看我的答案broI看到了，但是当我点击汉堡按钮并重叠标题文本时，浏览按钮仍然弹出，我试图让它只显示菜单，而不是浏览按钮。我现在通过摆弄z指数使它看起来很好，没有重叠。谢谢你，谢谢Nisharg，它正在工作，但是浏览按钮仍然在我的汉堡菜单的右边弹出，而不是像你的代码片段那样在下面。你知道我怎样才能让它出现在下面吗？因为我实际上更喜欢它，它看起来更好，我想，这是因为你的页面上有自定义CSS，它与你的代码冲突。它在一个
中。我不知道这是否影响了方向？给你的父类
弹性列
，我认为它会起作用，如果不起作用，发布新的问题