如何使用 Creative Tim 的 Material Dashboard 在顶部导航栏中显示下拉

Question

我正在使用基于引导程序的 Creative Tim 材料仪表板。演示页面显示了一组通知和用户下拉菜单项。我正在尝试为通知创建第一组。这是源代码，然后我会进一步解释。<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top">    <div class="container-fluid">        <div class="navbar-wrapper">            <a class="navbar-brand" href="javascript:;">Your Monthly Reports</a>        </div>        <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">            <span class="sr-only">Toggle Navigation</span>            <span class="navbar-toggler-icon icon-bar"></span>            <span class="navbar-toggler-icon icon-bar"></span>            <span class="navbar-toggler-icon icon-bar"></span>        </button>        <div class="collapse navbar-collapse justify-content-end">            <ul class="navbar-nav">                <li class="nav-item dropdown">                    <a href="javascript:;" class="nav-link" id="navbarDropdownNotifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                        <i class='material-icons'>notifications</i>                        <span class='notification'>1</span>                        <p class='d-lg-none d-md-block'>Notifications</p>                    </a>                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownNotifications">                        <a href="javascript:;" class="dropdown-item">Some Action</a>                    </div>                </li>            </ul>        </div>    </div></nav>我似乎无法实际显示下拉菜单。哦，元素更改类并在适当的时候获取显示、显示、隐藏和隐藏元素，并且在检查元素并关注它时，它表明该元素将自身“定位”在正确的位置，但您只是看不到它。我什至尝试过更改 z-index 以及div.dropdown-menu使用元素检查器的其他样式，但它似乎不想展示它的面孔。我什至查看了 3D 视图，看看前面是否有东西，但没有。该元素的显示并非没有，而是包含您希望看到的所有元素。但问题是当你点击通知图标时你看不到它。它改变了 DOM 代码，但视觉上没有任何改变。

Answer 1

问题在于下拉菜单被错误地更改。发现规则将其可见性更改为隐藏，但单击功能实际上并未正确更新。