当我在list.map()方法中创建它时,我的侧边栏下拉菜单没有打开,而在该方法之外创建它时,它可以正常工作。
下面的代码显示jsx通过list.map生成我的侧边栏下拉菜单,并且单击不起作用:
const listMenu = this.state.bestiaryList.map((bestiary) => (
<li key={bestiary.id} className="sidebar-dropdown">
<a href="#">
<span>{bestiary.name}</span>
</a>
<div className="sidebar-submenu">
<ul>
<li>
<a href="#">Dashboard 2</a>
</li>
</ul>
</div>
</li>
));
下面的代码显示了jQuery功能,可以使在list.map之外创建的菜单上单击工作:
jQuery(function ($) {
$(".sidebar-dropdown > a").click(function () {
$(".sidebar-submenu").slideUp(200);
if (
$(this)
.parent()
.hasClass("active")
) {
$(".sidebar-dropdown").removeClass("active");
$(this)
.parent()
.removeClass("active");
} else {
$(".sidebar-dropdown").removeClass("active");
$(this)
.next(".sidebar-submenu")
.slideDown(200);
$(this)
.parent()
.addClass("active");
}
});
$("#close-sidebar").click(function () {
$(".page-wrapper").removeClass("toggled");
});
$("#show-sidebar").click(function () {
$(".page-wrapper").addClass("toggled");
});
});
最后,在list.map外部创建的菜单正常工作:
<li className="sidebar-dropdown">
<a href="#">
<i className="fa fa-tachometer-alt" />
<span>Dashboard</span>
<span className="badge badge-pill badge-warning">New</span>
</a>
<div className="sidebar-submenu">
<ul>
<li>
<a href="#">Dashboard 1
</a>
</li>
<li>
<a href="#">Dashboard 2</a>
</li>
<li>
<a href="#">Dashboard 3</a>
</li>
</ul>
</div>
</li>
如果有人能帮助我,我将非常感激。