ul 收缩卡实现原理

最新推荐文章于 2022-07-17 01:12:37 发布

Amy o-O

最新推荐文章于 2022-07-17 01:12:37 发布

阅读量1.3k

点赞数

分类专栏： jquery 文章标签： html js

本文链接：https://blog.csdn.net/Amy_cloud/article/details/79000807

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这里写图片描述

1.html部分

<ul class="ul">
    <li class="bg">
        <div class="bg1">
            <img src="../img/ident/icon_renshe@2x.png" alt="">
            <p>人社</p>
        </div>
        <ul class='list'>
            <li>无锡公积金</li>
        </ul>
    </li>
    <li class="bg">
        <div class="bg1">
            <img src="../img/ident/icon_police@2x.png" alt="">
            <p>公安</p>
        </div>
        <ul class='list'>
            <li>四川省公安厅</li>
            <li>成都市公安局</li>
        </ul>
    </li>
    <li class="bg">
        <div class="bg1">
            <img src="../img/ident/icon_government@2x.png" alt="">
            <p>政务</p>
        </div>
        <ul class='list'>
            <li>深圳标准院</li>
            <li>佛山禅城</li>
            <li>四川政府政务中心</li>
            <li>宁夏自治区便民服务平台</li>  
        </ul>
    </li>
  </ul>

2.js部分

  $(document).click(function(e){  
        var target = $(event.target);           
        var noRes = target.parents('.list');
        if ( noRes.length ) {
            return;
        }
        var parent = target.parents('.bg');
        var has = false;
        if ( $(parent).hasClass('active') ){
            has = true;
        }
        $('.bg').removeClass('active');
        if ( parent.length !== 0 && !has ) {
            $(parent).addClass('active');
        }
    })  


    //法二：

    $('.ul li').click(function(e){  
        var target = $(event.target);                
        var parent = target.parents('.bg');
        var has = false;
        if ( $(parent).hasClass('active') ){
            has = true;
        }
        $('.bg').removeClass('active');
        if (parent.length !== 0 &&  !has ) {
            $(parent).addClass('active');
        }
    })

3.css部分

.bg{width:6rem;background-color: #2671d8;margin:.1rem auto;}
.bg1{width:100%;height:1rem;display: flex;align-items: center;}
.bg1 img{width: .7rem;height: .7rem;margin-left: .2rem;}
.bg1 p{font-size: .3rem;color: white;margin-left: .2rem;}

.bg ul{width:5.96rem;border: .02rem solid #2671d8;display: none;padding: .2rem 0;background-color: white;}
.bg ul li{list-style: disc;color: #2671d8;width: 5rem;margin: auto;padding: .1rem 0;font-size: .25rem;}
.active>.list {
    display: block;   //关键
}
.ul{margin-bottom: 1rem;}