请问下大家，这种点击缩放如何去做比较好？

Question

<div class="a">

        <ul>
            <li>111111</li>
            <li>222222</li>
            <li>333333</li>
            <li>444444</li>
            <li>555555</li>
        </ul>
        
        <div class="b">点击收缩</div>
    </div>
    
    <script>
        $('.b').click(function(){
            
        })
    </script>

我想收缩第2 -5行的li 元素 保留第一个li 展开也是一样，我不想拆开这个for循环，想了解下有哪些实现思路？ vue 和jquery 或者原生js 都可以，谢谢大家回答

Answer 1

vue:

//js

const arr = [1,2,3,4,5];

expand(){
  this.expanded = !this.expanded;
}
//vue  template
<ul>
  <li v-for="(item,index) in arr" v-show="index>1 && !expanded">{{item}}</li>
</ul>
<div @click="expand">收缩</div>

Answer 2

点击的时候给.a加个样式active

.a ul>li:not(:first-child){
    display: none
}
.a.active ul>li{
    display: block
}

Answer 3

这种展开收起的效果，

• 可以通过设置 active 样式去实现，加上补间动画会实现的很友好。

  1. 修改外部容的高度；
  2. 修改内部第2个元素之后的元素设置为 height:0;overflow:hidden
  3. 可以设置内部第2个元素之后的元素 display:none
  4. 可以使用jQ的 toggle、slideUp、slideDown 这几个API

  这种使用jQ还是Vue都是可以的。

• 可以通过修改源数组的数据来实现。

  • 比如说使用vue的computed属性来计算，展开时赋值全部数据，收起时只赋值第一条数据。

Answer 4

<template>
    <div class="a">
        <ul>
            <template v-for="(item, index) in arr">
                <li v-show="(is_show && index == 0) || !is_show">{{item}}</li>
            </template>
        </ul>

        <div class="b" @click="is_show = !is_show">点击{{is_show ? '展开' : '收起'}}</div>
    </div>
</template>

<script>
import {ref} from "vue";

export default {
    setup() {
        const is_show = ref(true);

        const arr = ['111111','222222','333333','444444','555555'];

        return {arr, is_show}
    },
}
</script>