CSS 面試題: 手寫 collapse(摺疊) 的 css/html 部分

時間 2019-11-06

標籤 css 面試手寫 collapse 摺疊 html 部分欄目 CSS 简体版

原文原文鏈接

注意

根據@_小白_的建議,用input配合僞類實現效果更好, 我實現了一下, 可是在微信小程序很差使(微信的input標籤的type不支持值爲checkbox或radio), 因此暫時這個階段, 處於對多端的支持, 仍是推薦你們用js來控制"開/合"動做, 查看無需js版本html

作一個組件庫不難

其實vue/react等框架的出現, 讓本身作一個ui變得簡單, 大部分的js邏輯都被庫封裝, 反而組件的代碼主要都是css, 因此只要css寫好了, 一個組件就完成60%以上了.vue

爲本身的職業將來造輪子

vue立刻也快出3了, 現存的全部vue組件庫都會重建, 這又是一個造輪子收集star的好時機, 若是你也想趁機造一個組件庫, 那麼開始吧:react

最終效果

常規版本

簡化版

html

<div class="a-collapse a-collapse--simplify">
    <div class="a-collapse__item a-collapse__item--open">
        <header role="button">
            <i class="icon-arrow"></i>
            <p>唐詩</p>
        </header>
        <article role="tabpanel">
            <p>唐詩，泛指創做於唐朝詩人的詩。唐詩是中華民族珍貴的文化遺產之一，是中華文化寶庫中的一顆明珠，同時也對世界上許多民族和國家的文化發展產生了很大影響，對於後人研究唐代的政治、民情、風俗、文化等都有重要的參考意義和價值。</p>
        </article>
    </div>

    <div class="a-collapse__item">
        <header>
            <i class="icon-arrow"></i>
            <p>宋詞</p>
        </header>
        <article>
            <p>宋代盛行的一種中國文學體裁，宋詞是一種相對於古體詩的新體詩歌之一，標誌宋代文學的最高成就。宋詞句子有長有短，便於歌唱。因是合樂的歌詞，故又稱曲子詞、樂府、樂章、長短...</p>
        </article>
    </div>

    <div class="a-collapse__item">
        <header>
            <i class="icon-arrow"></i>
            <p>元曲</p>
        </header>
        <article>
            <p>元曲，是盛行於元代的一種文藝形式，包括雜劇和散曲，有時專指雜劇。 雜劇，宋代以滑稽搞笑爲特色的一種表演形式，元代發展成戲曲形式。每本以四折爲主，在開頭或折間另加楔子，每折用同宮調同韻的北曲套曲和賓白組成。如關漢卿的《竇娥冤...</p>
        </article>
    </div>
</div>
複製代碼

scss

// 間距
$space: 4px;
// 單位圓角
$radius: 2px;
// 灰色
$gray-100: #f8f9fa !default;
$gray-300: #dee2e6 !default;

.a-collapse {
    overflow: hidden;
    border-radius: $radius*2;
    border: 1px solid $gray-300;

    &__item {
        &:nth-of-type(n+2) {
            border-top: 1px solid $gray-300;
        }



        >header {
            background-color: $gray-100;
            padding: 2*$space;
            font-size: 14px;
            cursor: pointer;

            >i.icon-arrow {
                width: 1em;
                height: 1em;
                display: inline-block;
                vertical-align: middle;
                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z"/></svg>')
            }

            >p {
                display: inline-block;
                vertical-align: middle;
                font-weight: bold;
            }
        }

        >article {
            display: none;
            padding: $space;
            font-size: 14px;
        }
    }

    // 展開狀況下
    &__item {
        &--open {
            >header {
                border-bottom: 1px solid $gray-300;

                >i.icon-arrow {
                    transform: rotate(90deg);
                }
            }

            >article {
                display: block;
            }
        }
    }

    // 簡化版本
    &--simplify {
        border: none;

        .a-collapse__item {
            >header {
                border: none;
                background-color: transparent;
            }
        }


    }
}
複製代碼