vue+原生JavaScript实现slideDown与slideUp[简单思路]

前端开发作者： 2024-08-20 21:40:01

整个代码如下：参考地址：vue也可以 slidedown

<template>
  div style="width:400px;margin:100px auto;">
            class="con">
                    ="same_module">
                            ="title up" @click="slide($event)"><span>标题一</i ="arrow"></idiv="detail" style="height:0">
                                    ="inner">
                                            p>这是一段文本>
>

script>
export default {
  data () {
    return {
        
    }
  },methods:{
        slide:function(event){
            let curTarget = event.currentTarget,containsCurClass  curTarget.classList.contains("up),nextSibling  curTarget.nextSibling;
            while(nextSibling.nodeType == 3 && /\s.test(nextSibling.nodeValue)){
                nextSibling  nextSibling.nextSibling;
            };
            let detailScrollHeight  nextSibling.scrollHeight;
            if(containsCurClass){
                    curTarget.classList.remove();
                    this.toggleSlide(nextSibling,detailScrollHeight,'500);
            }else{
                curTarget.classList.add();
                0,1)">);
            }
        },toggleSlide:(dom,height,time){
            dom.style.transition = height ' + time + ms;
            dom.style.height  height px;
        }
    }
}
style scoped
    .same_module{border:1px solid grey;}
    .titlecolor#fffheight30pxline-heightbackgroundbluepadding0 10pxcursor pointeroverflow hidden
    .title spanvertical-alignmiddle
    .title .arrowfloat right
    .detail
    .detail .inner5px 10px #808080
    .detail p 26px
    .arrow
        display inline-block
    border-top 2px solid
    border-right
    width 8px
    height
    border-color #EA6000
    transform rotate(315deg)
        position relative
        transition all 0.5s ease-in
        transform-origin center center
        top50%
        margin-top-10px;
    
    .up .arrow
            transform rotate(135deg)}
    
>