我正在尝试创建一个管理侧边栏菜单。产品下有子菜单,我正在通过jQuery切换。 但是子菜单href =“url”不起作用。当我点击产品 - 它打开子菜单时,如果我点击子菜单的任何项目,那么关闭切换而不转到目标页面。 你能告诉我我的代码有什么问题吗?我该如何解决? })(jQuery) ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
当我在 list.map() 方法中创建它时,我的侧边栏下拉菜单没有打开,当它在此方法之外创建时,它可以正常工作。
下面的代码显示了通过 list.map 生成我的侧边栏下拉菜单的 jsx,并且单击不起作用:
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>
如果有人可以帮助我,我将不胜感激。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.