javascript - 在 ul 和 li 标签中添加和删除类时面临问题
问题描述
我正在使用 Jquery 开发一个应用程序,我想有条件地添加类和删除类。在下面的代码中有菜单和子菜单。
如果用户点击#two
或#three
(打开子菜单),子菜单类被添加到包含和的ul
标签中,并且菜单类被移除。#two
#three
如果用户点击#three
或#four
(在li
标签上),菜单类被添加到包含and的ul
标签中,并且子菜单类从包含and#three
#four
ul
#one
#two
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
if (!$(".left_pannel ul li ul").hasClass('submenu')) {
alert("test");
$(".left_pannel ul li").removeClass("iconadd");
} else {
$(".left_pannel ul li").addClass("iconadd");
}
});
</script>
<body>
<div class="left_pannel">
<ul>
<li><a href="#one" class="achore">Matches</a>
<ul id="one" class="submenu" style="display: none;">
<li><a href="https://www.google.com">Add Matches(m)</a></li>
<li><a href="https://www.google.com">Add Cricket(m)</a></li>
</ul>
</li>
<li><a href="#two" class="achore">Quize Master</a>
<ul id="two" class="submenu" style="display: none;">
<li><a href="">Add Matches(m)</a></li>
<li><a href="">Add Cricket(m)</a></li>
</ul>
</li>
<li id="#three"><a href="https://www.google.com">Excel Update</a></li>
<li id="#four"><a href="#">Application version</a></li>
</ul>
</div>
</body>
解决方案
在单击按钮上找到属于subMenu的类,如果存在类,则更改为 iconadd的类,而不是删除iconadd
$(document).ready(function()
{
$(".left_pannel ul li ul").on("click",function()
{
if ($(this).hasClass('submenu'))
{
$(".left_pannel ul li").addClass("iconadd");
}
else
{
$(".left_pannel ul li").removeClass("iconadd");
}
});
});
谢谢,
推荐阅读
- c++ - 使用 std::chrono::from_stream() 解析时间格式“DD/MM/YYYY at hh:mm:ss”和其他格式
- python - 使用 Python 将 pdf 提取解析为 csv 文件
- typescript - TabPanel 组件中的 MUI v5 sx 道具类型错误
- sql - 您将如何创建对具有元组作为 SQL 中的主键的表的引用?
- java - 肥皂网络服务返回自定义标头弹簧启动
- javascript - javascript new audioContext mono to Stereo not wordking
- c# - 使用 MVVM 模式同步单独的 ScrollViewer 和 ScrollBar
- html - 部分区域隐藏在粘性导航栏后面
- python - 如何在python中获取多个用户输入变量作为特定定义的数据类型
- react-native - 错误:错误:无法解析模块./Hooks from /node_modules/react-native-reanimated/src/reanimated2/index.ts