原生js实现手风琴样式

柠檬花开_

已于 2022-08-31 13:26:50 修改

阅读量150

点赞数

文章标签： javascript css html 手风琴

于 2022-08-31 13:19:05 首次发布

本文链接：https://blog.csdn.net/Sunny_lxm/article/details/126622019

版权

原生js实现手风琴样式

<style>
        .pc-detail-feature-list p {
            padding: 0;
            margin: 0;
        }
        .pc-detail-feature-list {
            width: 1200px;
            margin: 0 auto 210px auto;
        }
        .pc-feature-list-title {
            font-family: DIN;
            font-size: 50px;
            line-height: 1;
            margin-bottom: 100px;
            text-align: center;
        }
        .pc-feature-list-and-img {
            display:flex;
            justify-content: space-between;
        }
        .pc-product-feature-list-item {
            color: #303031;
            font-weight: bold;
            font-size: 16px;
            font-family: Avenir-Roman;
            cursor: pointer;
            text-align: left;
            outline: none;
            transition: 0.4s;
        }
        .pc-product-feature-list-item.active{
            color: #1E78AB;
        }
        .pc-product-list-item-info {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
            padding-left: 20px;
            margin-bottom: 14px;
            font-family: Avenir-Roman;
        }
        .show-info-icon, .hidden-info-icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            color: #fff;
            border-radius: 100%;
            line-height: 14px;
            text-align: center;
        }
        .show-info-icon {
            background-color: #7a7a7a;
        }
        .hidden-info-icon {
            background-color: #1E78AB;
        }
        .icon-not-show {
            display: none;
        }
    
</style>
<div class="detail-feature-list">
    <!--    pc-->
    <div class="pc-detail-feature-list">
        <div class="pc-feature-list-title">
            FEATURS
        </div>
        <div class="pc-feature-list-and-img">
            <div>
                <div class="pc-product-feature-list-item">
                    <span class="show-info-icon">+</span>
                    <span class="hidden-info-icon icon-not-show">-</span>
                    60W CO2 fjsofdsdjdosDJPOEOSMJ
                </div>
                <div class="pc-product-list-item-info">
                    <p>2342423</p>
                    <p>2342423</p>
                    <p>2342423</p>
                    <p>2342423</p>
                </div>
                <div class="pc-product-feature-list-item">
                    <span class="show-info-icon">+</span>
                    <span class="hidden-info-icon icon-not-show">-</span>
                    160W CO1 fjsofdsdjdosDJPOEOSMJ
                </div>
                <div class="pc-product-list-item-info">
                    <p>234fgfdgfd2423</p>
                    <p>234fgfdgfd2423</p>
                    <p>234fgfdgfd2423</p>
                    <p>234fgfdgfd2423</p>
                </div>
                <div class="pc-product-feature-list-item">
                    <span class="show-info-icon">+</span>
                    <span class="hidden-info-icon icon-not-show">-</span>
                    630W CO333 fjsofdsdjdosDJPOEOSMJ
                </div>
                <div class="pc-product-list-item-info">
                    <p>234fgfdgfd2423234fgfdgfd2423234fgfdgfd2423</p>
                    <p>234fgfdgfd2423</p>
                    <p>234fgfdgfd2423234fgfdgfd2423</p>
                    <p>234fgfdgfd2423</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var FeaturelistItem = document.getElementsByClassName("pc-product-feature-list-item");
    for (var i = 0; i < FeaturelistItem.length; i++) {
        FeaturelistItem[i].onclick = function() {
            this.classList.toggle("active");
            var panel = this.nextElementSibling;
            if (panel.style.maxHeight){
                panel.style.maxHeight = null;
                this.children[0].classList.remove('icon-not-show')
                this.children[1].classList.add('icon-not-show')
            } else {
                panel.style.maxHeight = panel.scrollHeight + "px";
                this.children[0].classList.add('icon-not-show')
                this.children[1].classList.remove('icon-not-show')
            }
        }
    }
</script>