Bootstrap 4 引导下拉菜单中的子菜单不工作

我的下拉菜单无法正常运行。第一级下拉菜单工作正常，但是我的子菜单没有打开。当我点击它时，它只会关闭菜单而不做任何更改

下面是我正在使用的代码，没有出现的子菜单部分是包含“添加项”、“编辑项”和“删除项”的列表

{/*此行将保留指向用户管理页的链接*/}

检查这一个，它将帮助您。 这是一个多层子菜单下拉列表。这对我有用。请检查一下，让我知道

---

根据您的需要更改CSS

$（文档）。在（'单击'，'上。下拉菜单'，函数（e）{
e、 停止传播（）；
});
如果（$（窗口）.width（）<992）{
$（'.下拉菜单a'）。单击（函数（e）{
e、 预防默认值（）；
if（$（this）.next（'.submenu'）.length）{
$（this.next（'.submenu'）.toggle（）；
}
$（'.dropdown'）.on（'hide.bs.dropdown'，函数（）{
$（this.find（'.submenu'）.hide（）；
})
});
}

.nav项、.dropdown项{
背景色：浅灰色！重要；
颜色：黑色！重要；
填充：5px！重要；
}
.nav项：悬停，.下拉项：悬停{
背景色：灰色！重要；
颜色：白色！重要；
填充：5px！重要；
}
a{
文字装饰：无！重要；
颜色：黑色！重要；
}

我的多层下拉列表

检查代码，告诉我它是否正常工作。

---

我试过了，两个都是正确的。使用并更改CSS。我已经做了 仅适用于工作子菜单下拉列表。两者都是相同的，有些细微的变化是它们的特点。>希望你也一样。让我知道

$（文档）。在（'单击'，'上。下拉菜单'，函数（e）{
e、 停止传播（）；
});
如果（$（窗口）.width（）<992）{
$（'.下拉菜单a'）。单击（函数（e）{
e、 预防默认值（）；
if（$（this）.next（'.submenu'）.length）{
$（this.next（'.submenu'）.toggle（）；
}
$（'.dropdown'）.on（'hide.bs.dropdown'，函数（）{
$（this.find（'.submenu'）.hide（）；
})
});
}

您是否正在处理ReactJs标记在React中使用，而不是在引导中使用。在ReactJs no中，我尝试去掉锚标记，但这仍然不能解决我的问题。我甚至尝试用你发布的链接中的代码替换所有内容，但即使如此，它仍然会切断任何子菜单。结果证明这绝对是CSS问题。这本可以解决这个错误，但我们的团队最终在UI设计上走了一条不同的道路。谢谢你的帮助！

    <div class="dropdown show">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Admin</a>
        <div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuLink">
            <ul className="nav navbar-nav">
                <li class="nav-item">
                     {/*  This Line will hold the link to the User Management page  */}
                    <a className="dropdown-item " href="#"><Link to={'/missionReports'} className="nav-link">Mission Reports</Link></a>
                </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> Data Management </a>
                    <ul class="dropdown-menu">
                        <li><a className="dropdown-item " href="#"><Link to={'/AddInfo'} className="nav-link">Add Item</Link></a></li>
                        <li><a className="dropdown-item" href="#"><Link to={'/EditInfo'} className="nav-link">Edit Item</Link></a></li>
                        <li><a className="dropdown-item" href="#"><Link to={'/DeleteInfo'} className="nav-link">Delete Item</Link></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>