react折叠显示更多

显示效果如上图

 <div className='introView' >
                <div className='deptname'>骨科</div>
                <div className='deptphone'>门诊电话: <span>010-8888 8888</span></div>
                <div className={getMore?'deptContent':'deptContentHidden'}>
                主要研究骨骼肌肉系统的解剖、生理与病理，运用药物、手术及物理方法保持和发展这一系统的正常形态与功能。随着时代和社会的变更，骨科伤病谱有了明显的变化，例如，骨关节结核、骨髓炎、小儿麻痹症等疾病明显减少，交通事故引起的创伤明显增多。髌骨骨折、尺神经损伤、先天性髋内翻、断指再植、趾间神经痛、距骨后外结节骨折、髌骨骨折拇指再造、先天性胫骨缺如、僵鉧、感染性肋软骨炎、颞下颌关节强直、风湿热、眼眶击出性骨折、腘肌肌腱炎、跖趾关节痛、胫后神经痛、跟腱前囊炎、纤维肌痛症、滑囊炎、感染性关节炎、足舟状骨骨软骨病、姿态性腰腿痛、赖特综合征、灼性神经痛、纤维肌痛综合症等。
                </div>
                {getMore == false && <div className='more-btn' onClick={getmore}>
                    <span>展开更多</span>
                    <img src={arrowDown} alt=""/>
                </div>}
                {getMore == true &&<div className='more-btn' onClick={packup}>
                    <span>收起</span>
                    <img src={arrowUp} alt=""/>
                </div>}

           </div>

核心代码通过getmore来控制显示更多还是收起

    function getmore(){
        setgetMore(true)
    }
    function packup(){
        setgetMore(false)
    }

通过css 控制隐藏的时候其实只有两个关键属性

height: 123px;
overflow: hidden;

    .deptContentHidden{
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #666666;
        letter-spacing: 0.2px;
        text-align: justify;
        line-height: 22px;
        margin-top: 16px;
        margin-left: 23px;
        margin-right: 23px;
        height: 123px;
        overflow: hidden;
    }
    .deptContent{
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #666666;
        letter-spacing: 0.2px;
        text-align: justify;
        line-height: 22px;
        margin-top: 16px;
        margin-left: 23px;
        margin-right: 23px;
    }

react折叠显示更多

猜你喜欢