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

  • Z时代
  • 2024-03-05
  • 分类：IT

<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 都可以，谢谢大家回答

回答：

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>

回答：

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

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

回答：

这种展开收起的效果，

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

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

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

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

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

回答：

<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>

以上是 请问下大家，这种点击缩放如何去做比较好？ 的全部内容， 来源链接： utcz.com/p/932907.html

回到顶部