用js写点击事件实现类名添加

傷城~ 2022-03-26 04:22 604阅读 0赞

## 实现原理：其实就是点击的时候把高变为auto 自适应，点击的时候下面的 height: auto;会覆盖上面的 height: 0.8rem; ##

实现效果:  
未点击  
![在这里插入图片描述][20190115160802954.png]  
![在这里插入图片描述][20190115160851118.png]  
点击：  
![在这里插入图片描述][20190115160913404.png]  
![在这里插入图片描述][20190115160925447.png]  
test.html

<section>
                
                <div class="main">
                    <p class="actions">全部（945）</p>
                    <p>好评（945）</p>
                    <p>有图（35）</p>
                    <p>快递不错（25）</p>
                    <p>快递不错（25）</p>
                </div>
                <div class="jiantou1">
                    <img class="dianji" src="../imgs/jiantou1.png" alt="">//注意这里你引入一个自己的图片
                </div>
            </section>
            <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
            <script>
                $('.dianji').click(function() {
                    // 点击第一次添加，点击第二次删除
                    $('.main').toggleClass("mains")
                })
            </script>

test.css

.main {
        display: flex;
        flex-wrap: wrap;
        height: 0.8rem;
        overflow: hidden;
        margin-left: 0.3rem;
    }
    
    .mains {
        height: auto;
    }
    
    .main p {
        margin-top: 0.22rem;
        margin-right: 0.2rem;
        padding: 0 0.1rem;
        line-height: 0.4rem;
        background: #e6f9ee;
        color: #7d7c7d;
        border-radius: 1rem;
        font-size: 0.2rem;
        height: 0.4rem;
    }
    
    .actions {
        height: 0.4rem;
        width: 1.5rem;
        text-align: center;
        line-height: 0.4rem;
        background: #06c058!important;
        color: #e8e8e8!important;
        border-radius: 1rem;
        font-size: 0.2rem;
    }
    
    .jiantou1 {
        height: 0.6rem;
        text-align: center;
        line-height: 0.6rem;
        /* background: red; */
        border-bottom: #efefef;
    }
    
    .jiantou1 img {
        width: 0.22rem;
        height: 0.2rem;
    }

[20190115160802954.png]: /images/20220326/15a0f91331744ddebcb7951e544ce471.png
[20190115160851118.png]: /images/20220326/f45d0ca9cef943289acb397133099c16.png
[20190115160913404.png]: /images/20220326/4d202f5ab2cc4e56a30f7b40b765300e.png
[20190115160925447.png]: /images/20220326/310f197cde4446e697dd8a2805cb907d.png