CSS 面试题: 手写 collapse(折叠) 的 css/html 部分

Tikitoo 发布于2019-08-30 11:26 / 2995人阅读

摘要：杂剧，宋代以滑稽搞笑为特点的一种表演形式，元代发展成戏曲形式。每本以四折为主，在开头或折间另加楔子，每折用同宫调同韵的北曲套曲和宾白组成。

源码: https://github.com/any86/any-...

做一个组件库不难

其实vue/react等框架的出现, 让自己做一个ui变得简单, 大部分的js逻辑都被库封装, 反而组件的代码主要都是css, 所以只要css写好了, 一个组件就完成60%以上了.

为自己的职业未来造轮子

vue马上也快出3了, 现存的所有vue组件库都会重建, 这又是一个造轮子收集star的好时机, 如果你也想趁机造一个组件库, 那么开始吧:

最终效果

常规版本

简化版

html


    
        
            
            唐诗
        
        
            唐诗，泛指创作于唐朝诗人的诗。唐诗是中华民族珍贵的文化遗产之一，是中华文化宝库中的一颗明珠，同时也对世界上许多民族和国家的文化发展产生了很大影响，对于后人研究唐代的政治、民情、风俗、文化等都有重要的参考意义和价值。
        
    

    
        
            
            宋词
        
        
            宋代盛行的一种中国文学体裁，宋词是一种相对于古体诗的新体诗歌之一，标志宋代文学的最高成就。宋词句子有长有短，便于歌唱。因是合乐的歌词，故又称曲子词、乐府、乐章、长短...
        
    

    
        
            
            元曲
        
        
            元曲，是盛行于元代的一种文艺形式，包括杂剧和散曲，有时专指杂剧。 杂剧，宋代以滑稽搞笑为特点的一种表演形式，元代发展成戏曲形式。每本以四折为主，在开头或折间另加楔子，每折用同宫调同韵的北曲套曲和宾白组成。如关汉卿的《窦娥冤...

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,")
            }

            >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;
            }
        }


    }
}

本文并不想讲js, 如果大家感兴趣剩下的js工作就交给大家完成了, 等vue3发布, 届时我会结合ts实现完整的组件, 简要逻辑:

给组件增加一个"手风琴"的选项, 就是只可以同时打开一个"页".

给每次点击header标签的时候, 触发"页"的合并和展开.

给"合并/展开"加个动画效果,提示这里需要js计算"页"高度, 才能实现和"饿了么ui中collapse组件"的"合并/展开"一样的动画.

嘿, 看是不是js的工作并不是很多!

GPU云服务器云服务器手写js面试题 linux的面试题 js的基础面试题面试题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114995.html

css基础知识整理篇

摘要：折叠后的计算参与折叠的都是正值在都是正数的情况下，取其中较大的值为最终值。参与折叠的中有正值，有负值有正有负，先取出负中绝对值中最大的，然后，和正值中最大的相加。单冒号用于伪类，双冒号用于伪元素。转自某个大神整理的面试题盒子模型标准盒子模型内容（content）+ 填充（padding）+ 边界（margin）+ 边框（border）; 低版本IE盒子模型 content部分把...

QiShare 2019-08-29 11:24 评论0 收藏0
CSS规范 > 8 盒模型 Box Model

摘要：当两个及以上外边距折叠，合并后的外边距宽度是发生折叠的外边距中的最大宽度。如果该元素的外边距同其父元素的上外边距折叠，则该盒的上边框边缘同其父元盒的上边框边缘相同。 2017-07-20: 关于外边距折叠, 推荐问题: https://segmentfault.com/q/10... 8 盒模型 Box Model URL: http://www.w3.org/TR/CSS2/box...

suemi 2019-08-28 18:14 评论0 收藏0
献给前端求职路上的你们（上）

摘要：事件如何使用事件，以及和标准事件模型之间存在的差别以及常用的事件委托。模拟老式浏览器的行为以防止站点无法工作。首先，巧妙的使用这一标记，将游览器从所有情况中分离出来。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于。 showImg(https://segmentfault.com/img/remote/1460000008630900); （在放大镜中寻找你）前言我是...

animabear 2019-08-21 11:34 评论0 收藏0
献给前端求职路上的你们（上）

摘要：事件如何使用事件，以及和标准事件模型之间存在的差别以及常用的事件委托。模拟老式浏览器的行为以防止站点无法工作。首先，巧妙的使用这一标记，将游览器从所有情况中分离出来。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于。 showImg(https://segmentfault.com/img/remote/1460000008630900); （在放大镜中寻找你）前言我是...

jackzou 2019-08-30 15:53 评论0 收藏0
献给前端求职路上的你们（上）

摘要：事件如何使用事件，以及和标准事件模型之间存在的差别以及常用的事件委托。模拟老式浏览器的行为以防止站点无法工作。首先，巧妙的使用这一标记，将游览器从所有情况中分离出来。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于。 showImg(https://segmentfault.com/img/remote/1460000008630900); （在放大镜中寻找你）前言我是...

hiyang 2019-08-01 16:27 评论0 收藏0