点击li标签增加样式,并删除其它li标签样式

来源:互联网 发布:逆袭网络剧百度云 编辑:程序博客网 时间:2024/05/16 06:19

页面部分

<ul class="layui-nav layui-nav-tree" lay-filter="demo">  <li class="layui-nav-item layui-nav-itemed">       <a href="javascript:;">默认展开<span class="layui-nav-more"></span></a>       <dl class="layui-nav-child">           <dd><a href="javascript:;">选项一</a></dd>           <dd><a href="javascript:;">选项二</a></dd>           <dd><a href="javascript:;">选项三</a></dd>           <dd><a href="">跳转项</a></dd>       </dl>   </li>   <li class="layui-nav-item">       <a href="javascript:;">解决方案<span class="layui-nav-more"></span></a>       <dl class="layui-nav-child">           <dd><a href="">移动模块</a></dd>           <dd><a href="">后台模版</a></dd>           <dd><a href="">电商平台</a></dd>       </dl>   </li>   <li class="layui-nav-item"><a href="">云市场</a></li>   <li class="layui-nav-item"><a href="">社区</a></li></ul>

jQuery部分:

//添加li标签的点击事件$('.layui-nav-item').click(function () {    var getClass = $(this).attr('class');    //判断当前样式    if(getClass == 'layui-nav-item layui-nav-itemed'){        $(this).removeClass('layui-nav-itemed')    }else if(getClass == 'layui-nav-item'){    //增加样式前先删除掉其它li标签的样式        $(this).siblings('li').removeClass('layui-nav-itemed')        $(this).addClass('layui-nav-itemed')    }})
原创粉丝点击