js中关于给两层的li标签添加class的问题，求大神解答！

Posted 2023-05-15

如下代码，ul下有li标签，li标签下包着ul标签，下面还有一层li标签。有两层的li标签，点击第一层li标签，会给点击的li标签加上class=“submenu open”的样式（展开列表，没点击之前是class=“submenu”），主要是第二层的li标签点击以后，本身会加上class=“active” ，同时给自己的上一级li标签加上class=“submenu active open” 的样式，请问如何实现？

<div id="sidebar">
<a href="#" class="visible-phone"><i class="icon icon-home"></i> 主页</a>
<ul id="jj">
<li ><a href="index.html"><i class="icon icon-home"></i> <span>主页</span></a></li>
<li class="submenu active open">
<a href="#"><i class="icon icon-th-list"></i> <span></span> <span class="label">8</span></a>
<ul>
<li class="active"><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
</ul>
</li>
<li class="submenu">
<a href="buttons.html"><i class="icon icon-tint"></i> <span>溪口旅游</span> <span class="label">6</span></a>
<ul>
<li ><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</li>
</ul>

</div>

参考技术A 你应该是想实现风琴菜单或者类似效果的吧？推荐使用jquery（轻量级的js封装组件）很方便的实现了风琴菜单。一定要用js的话代码太长了我给你点思路。首先为元素绑定onclick事件，一级li和二级li区别对待。你没说清楚哪里不明白，我就猜一下你是不知道如何选中二级节点的父节点。选中当前节点的父节点的方法是this.parentNode就是当前节点的父节点了。你可以if this.onclick 那么this.parentNode.class就改为什么什么。你试试 参考技术B $(function()
$(".submenu").click(function()
$(".active").removeClass("active");
$(".active2").removeClass("active2");
$(this).addClass("active");
);

$(".submenu>ul>li").click(function()
$(".active").removeClass("active");
$(".active2").removeClass("active2");
$(this).parent().parent(".submenu").addClass("active");
$(this).addClass("active2");
);
);

这里要给下级菜单再写一个active2的css样式

我测试了一下，不知道为什么，用一个样式不得行

这里用的是jquery的版本，如果你要原生js的版本再追问

而且我觉得这里还有一个问题，因为所有的2级菜单初始状态都是隐藏的，所以，只有在点击1级菜单才会展开，这时已经点击了1级菜单，1级菜单就应该有active样式了，这里好像只需要给2级菜单添加个点击事件再加个active样式就可以了。。。不需要再给他的1级菜单添加一次样式

追问

第一个给父级li标签加样式没问题了，但是第二个有问题，一点击子级li标签，就所有的样式都消失了，不管是父级还是子级，主要是加载内容的时候可能有一次刷新，所有可能样式都没有了，这个问题怎么解决？还有active2是哪里来的？子级的也是active，求大神解答。

[转]为什么 在li标签上添加了disabled类名的时候，不能禁止其点击功能？这个在 bootstrap.js 里面没有设置好吗？

<input class="disabled">不会禁止按钮的默认行为

<input disabled="disabled">可以禁止元素的默认行为

 

 

jquery 或js

class="disabled" 元素一律点击无效  

比如 
<a id="PostComment" class="btn">提交</a> 点击有效
<a id="PostComment" class="btn disabled">提交</a> 点击无效 

谢谢！

 

1 eg
2 <ul>
3                 <li><a href="#" class="disable">公告</a></li>
4                 <li><a href="#"class="disable">规则</a></li>
5                 <li><a href="#"class="disable">论坛</a></li>
6                 <li><a href="#">安全</a></li>
7                 <li><a href="#">公益</a></li>
8 </ul>

只要是正常的bootstrap，非定制的。。。引入disable类即可！！

 

 

对于bootstrap中的disabled样式，好像并没有对a标签的默认行为进行处理，这可能就是它虽然设置了disabled样式但仍然可触发的原因。

解决方案：

1、添加Css阻止a标签的触发

1 .disabled{
2 pointer-events:none; 
3 }

1 <!--禁止状态-->
2 <ul class="pager">
3   <li class="disabled"><a href="http://v3.bootcss.com/">&laquo;上一页</a></li>
4   <li><a href="#">下一页&raquo;</a></li>
5 </ul>

2、JQ

1            $(".disabled").click(function (event) {
2                event.preventDefault();        
3                   });