javascript - 保持选定的菜单处于活动状态
问题描述
我正在使用 ul 和 li 创建侧边菜单。我一直在尝试使所选菜单突出显示,但无法弄清楚我做错了什么。我尝试为顶部“ul”使用一个类并处理它的点击,以及为每个“li”添加一个类并处理它的点击。
一些菜单项有子菜单。
这就是我所拥有的,也是我厌倦的:
<ul class="list-unstyled components mb-5">
<li class="active component">
<a href="\Home\">Dashboard</a>
</li>
<li class="component">
<a href="#Sub1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Item 1</a>
<ul class="collapse list-unstyled" id="Sub1">
<li>
<a href="#">Sub-Menu 1-1</a>
</li>
<li>
<a href="#">Sub-Menu 1-2</a>
</li>
</ul>
</li>
<li class="component">
<a href="#Sub2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Item 2</a>
<ul class="collapse list-unstyled" id="Sub2">
<li>
<a href="#">Sub-Menu 2-1</a>
</li>
<li>
<a href="#">Sub-Menu 2-2</a>
</li>
</ul>
</li>
<li class="component">
<a href="/blah.aspx">Item 3</a>
</li>
<li class="component">
<a href="/blah.aspx">Item 4</a>
</li>
</ul>
JS/jQuery:
$(".component").on("click", "a", function(){ // Also tried with "ul" class of "components" instead of "component"
//event.preventDefault(); // When I uncomment this, clicking the menu doesn't do anything
$(this).parent().removeClass("active");
$(this).addClass("active");
//$(this).parent().addClass("active").siblings().removeClass("active");
});
解决方案
您的班级切换正在删除,然后立即重新添加班级。看看你需要的切换效果: https ://api.jquery.com/toggleclass/
推荐阅读
- mysql - 删除 MySQL 选择
- sql-server - CSV 文件格式更改
- javascript - 在页面标题中使用particle.js,无法使用css达到所需的大小
- sql-server - 为创建和更新的日期列设置默认值是一种好习惯吗?
- continuous-integration - Go CD 失败消息在环境中可用
- leaflet - Leaflet MarkerCluster 在缩放时停止自动重新聚类
- excel - 如何每 30 行添加分页符
- visual-studio - Visual Studio 卸载
- angular - 谷歌地图搜索问题
- python - 为什么字符串不能将我的输出识别为整数