如何使用 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

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