CSS——通过CSS实现展示更多选项和收起

简介: CSS——通过CSS实现展示更多选项和收起

前言

效果如下:

最近要开始回忆回忆PS的知识,所以画的丑丑的

内容

<template>
  <div>
    <div class="button-item">
<!--控制选项展示隐藏-->
      <div :class="isShow?'button-height':''">
        <button v-for="(option, index)in item.options" :key="option.optionId">{{ option.optionName }}
          <!--选项内容-->
        </button>
      </div>
<!--更多选项按钮展示 | 控制选项的展示和隐藏-->
      <button v-if="item.options.length>4" @click="btnShow">{{ isShow ? '更多选项' : '收起' }}
<!--控制箭头-->
        <span :class="isShow?'cuIcon-unfold':'cuIcon-fold'"></span>
      </button>
    </div>
</template>
<script>
export default {
  name:"scordBoardButton",
      data() {
        return {
          isShow: true
        }
  },
  methods:{
    
    btnShow() {
      this.isShow = !this.isShow;
    }
  }
}
</script>
<style lang="less" scoped>
  .button-height{
    // 通过高度控制内容的展示
    height:36vmin;
    overflow:hidden;
  }
</style>

学无止境,谦卑而行.

目录
打赏
0
0
0
0
67
分享
相关文章
纯css动画 —— 展开、收起
纯css动画 —— 展开、收起
513 2
CSS实现多行文本的展开收起
CSS实现多行文本的展开收起
82 0
css实现列表展开与收起
今天讲ss实现列表展开与收起
561 0
|
9天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
124 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
28天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等