javascript - siblings()是获取平级元素,哪不是平级应该怎么获取元素呢?
伊谢尔伦
伊谢尔伦 2017-04-11 13:19:35
0
2
476
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> -->
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<style>
*{
    margin: 0;
    padding:0;
}
a{
    color:#000;
}
 .asd-off{
     background-color: yellow;
 }
 .asd-on{
     background-color: lightgreen;
 }
 .chk-tap{
    background-color: #e4393c;
 }
 .chk-j{
     background-color: lightblue;
 }
    
</style>
<body>
<p  class="aside-struct Hui-aside">
  <ul class="menu_dropdown  bk_2">
    <li ><a _href="showCodes.html" data-title="即时显码" href="javascript:void(0)">即时显码</a></li>
    <li><a _href="TracesQuery.html" data-title="追溯查询" href="javascript:void(0)">追溯查询</a></li>
    <li><a href="javascript:void(0)" _href="rawCode.html" data-title="生码管理">生码管理</a></li>
    <li><a _href="autocode.html" data-title="自动扫码" href="javascript:void(0)">自动扫码</a></li>
    <ol> <a _href="" data-title="仓库管理" href="javascript:void(0)" class="asd-off">仓库管理</a>
      <ul style="display: none" class="asd-child">
        <li class="chk-j"><a href="javascript:void(0)" _href="wmsMain.html" data-title="产品仓库">产品仓库</a></li>
        <li><a href="javascript:void(0)" _href="wmsPassPut.html" data-title="出入库记录">出入库记录</a></li>
        <li><a href="javascript:void(0)" _href="wmsFail.html" data-title="不合格产品">不合格产品</a></li>
      </ul>
    </ol>
    <li><a _href="sysForTest.html" data-title="质检管理" href="javascript:void(0)" >质检管理</a></li>
    <ol> <a _href="" data-title="经销商分销" href="javascript:void(0)" class="asd-off">经销商分销</a>
      <ul  style="display: none" class="asd-child">
        <li class="chk-j"><a href="javascript:void(0)" _href="retailStore.html" data-title="我的商品">我的商品</a></li>
        <li><a href="javascript:void(0)" _href="salesRecord.html" data-title="分销记录">分销记录</a></li>
      </ul>
    </ol>
    <ol> <a _href="" data-title="基础信息设置" href="javascript:void(0)" class="asd-off">基础信息设置</a>
      <ul style="display: block" class="asd-child">
        <li><a _href="unitSet.html" data-title="计量单位设置" href="javascript:void(0)" >计量单位设置</a></li>
        <li><a _href="detectionPduSet.html" data-title="产品检验项目设置" href="javascript:void(0)" >产品检验项目设置</a></li>
        <li><a _href="pduItem.html" data-title="产品信息" href="javascript:void(0)" >产品信息</a></li>
        <li><a _href="company.html" data-title="企业信息" href="javascript:void(0)" >企业信息</a></li>
  </ul>
    </ol>
    
    <ol> <a  data-title="权限管理" href="javascript:void(0)" class="asd-off">权限管理</a>
        <ul style="display: block" class="asd-child" >
        <li><a _href="roleMain-module.html" data-title="角色权限" href="javascript:void(0)" >角色权限</a></li>
        <li><a _href="userRole-module.html" data-title="用户角色" href="javascript:void(0)" >用户角色</a></li>
        <li><a _href="userMg-module.html" data-title="用户管理" href="javascript:void(0)" >用户管理</a></li>
        <li><a _href="roleMg-module.html" data-title="角色管理" href="javascript:void(0)" >角色管理</a></li>
        <li><a _href="auth-module.html" data-title="权限管理" href="javascript:void(0)" >权限管理</a></li>
    </ul>
    </ol>
  
    <li><a _href="index12.html" data-title="关于我们" href="javascript:void(0)" >关于我们</a></li>
  </ul>
</p>
    
</body>
<script>
        /*左侧主导航*/
$('.asd-off').click(function(){
        if($(this).siblings('ul').css('display')=='none'){
            $(this).parent('li').siblings('li').removeClass('asd-on');
            $(this).addClass('asd-on');
            $(this).siblings('ul').slideDown(50).children('li');
            if($(this).parents('li').siblings('li').children('ul').css('display')=='block'){
                $(this).parents('li').siblings('li').children('ul')
                .parent('li').children('a').removeClass('asd-on');
                $(this).parents('li').siblings('li').children('ul').slideUp(50);

            }
        }else{
            //控制自身变成+号
            $(this).removeClass('asd-on');
            //控制自身菜单下子菜单隐藏
            $(this).siblings('ul').slideUp(50);
            //控制自身子菜单变成+号
            $(this).siblings('ul').children('li')
            .children('ul').parent('li').children('a').addClass('asd-on');
            //控制自身菜单下子菜单隐藏
            $(this).siblings('ul').children('li').children('ul').slideUp(50);
            //控制同级菜单只保持一个是展开的(-号显示)
            $(this).siblings('ul').children('li').children('a').removeClass('asd-on');
        }
    });    

$(".menu_dropdown li").on("click",function(){
    $(this).addClass('chk-j').siblings().removeClass("chk-j");
    
})

</script>
</html>



   $(".menu_dropdown li").on("click",function(){
        $(this).addClass('chk-j').siblings().removeClass("chk-j");
        
    })

**请问上面这段代码可以怎么改进?
这样做$(this).siblings()只能指向.menu_dropdown直接包裹的li而不能操作到.asd-child里的li将其样式删除**

比如说我点【用户角色】了【产品检验项目设置】和【追溯查询都没有清除样式】,需求就是不管是那一层的li点击了能够清除.menu_dropdown
li其他的样式。

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

reply all(2)
伊谢尔伦
 $(".menu_dropdown>li").on("click",function(){
        $(this).addClass('chk-j').siblings("li").removeClass("chk-j");
        
    })

$(".menu_dropdown>li") 第一行加一个“>” 第二行siblings("li"),

Ty80
$(".menu_dropdown li").on("click", function () {
    $(this).addClass('chk-j').siblings().find('li').removeClass("chk-j");
    $(this).addClass('chk-j').closest('ol').siblings().removeClass('chk-j');
})
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!