2019-03-01

编写内容隐藏下拉遇到点问题 

思路：两步走，第一设置点击图片的事件，第二是对应的内容展示。内容是根据设置高度来展示

最终遇到的样式嵌套的问题、变量冲突

changeHeight = () => {

    let _isOpen = this.state.isOpen

    this.setState({

      isOpen: !_isOpen

    }) }

? <div className={xmmStyles.xmmRisk} style={{ marginTop: '35px' }}>

                <h3 className={`${xmmStyles.floorTitle} ${xmmStyles.colorWhite}`}>

                  健康管理

                </h3>

                <div className={`${xmmStyles.padLR28} ${isOpen ? '' : xmmStyles.hidden}`} >

                  {

                    info.expertAdvice && info.expertAdvice.length

                      ? (info.expertAdvice.split('<br>').map((item, i) => (

                        <p style={{ color: '#fefdfd', marginBottom: '8px' }} key={`advice${i}`} dangerouslySetInnerHTML={{ __html: item }} />

                      ))

                      ) : null

                  }

                </div>

                <div className={`${xmmStyles.btnLand}`}>

                  <a className={`${xmmStyles.moreBtn}`} onClick={this.changeHeight}>

                    <span>{isOpen ? '收起' : '展开全部'}</span>

                    {

                      isOpen ? (<i className={`iconfont ${xmmStyles.downIcon}`}>&#xe63c;</i>)

                        : (<i className={`iconfont ${xmmStyles.downIcon}`}>&#xe63d;</i>)

                    }

                  </a>

                </div>