用div来设置下拉的展开列表并添加scrollbar

最新推荐文章于 2023-05-18 10:09:46 发布

百奇

最新推荐文章于 2023-05-18 10:09:46 发布

阅读量544

点赞数

CC 4.0 BY-SA版权

分类专栏：项目

本文链接：https://blog.youkuaiyun.com/qq_43264596/article/details/89015720

项目专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何利用DIV元素及CSS属性实现一个可展开的下拉列表，通过设置数据源和利用visibility属性控制列表的显示与隐藏。文章还讨论了如何解决布局问题，如设置z-index确保列表浮动在其他元素之上，并添加滚动条来改善用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用div来设置下拉的展开列表
1.设置数据源

let moreListItem = [
            {
              status:'warn',
              name:'中海集团 资产负债率',
              value:'87.7%'
            },
            {
              status:'danger',
              name:'股份公司 净资产收益率率',
              value:'7.70%'
            },
            {
              status:'danger',
              name:'西部建设 经营性现金流',
              value:'87.7%'
            },
            {
              status:'warn',
              name:'中建港务 借贷资本率',
              value:'87.7%'
            },
            {
              status:'warn',
              name:'中建六局 资产负债率',
              value:'87.7%'
            },
          ];

2.用div的visibility属性来控制显示或者不显示

<span className={styles['spread']} onClick={this.handleClick}>展开</span>
                      <div className={classNames(styles['morecontent'],'scrollbar')} style={{ visibility:'visible'}}>
                       {
                           moreListItem.map((item,i) => {
                           const { status,project,name,value} = item
                           let text = ''
                           if (status == 'danger') {
                           text = '预警'
                           }if(status == 'warn'){
                             text = '关注'
                             }
                           return (
                           <div className={styles['listcont']}>
                               <span className={styles[`${status}`]}>{text}</span>
                               <span className={styles['item']} >{name}</span>
                               <span className={styles['item']} >{value}</span>
                               <span className={styles['item']}>{" > "}</span>
                           </div>

                           );
                           })
                       }
                       </div>

                </span>

这里注意由于所有的div默认z-index都是0所以不加z-index属性他会把盒子撑破所以就设置z-index = 1让他浮在其他div上面
span是不能直接设置宽高的得在span中设置display:block 和float :left/right属性这样就可以设置宽高或者最大高度之类的

添加scrollbar

只要设置div的样式overflow :auto并且div是定高的就可以