编写内容隐藏下拉遇到点问题
思路:两步走,第一设置点击图片的事件,第二是对应的内容展示。内容是根据设置高度来展示
最终遇到的样式嵌套的问题、变量冲突
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}`}></i>)
: (<i className={`iconfont ${xmmStyles.downIcon}`}></i>)
}
</a>
</div>