vue 点击当前元素进行显示隐藏，上次点过的元素隐藏

码世界

已于 2022-09-29 16:45:53 修改

阅读量1.5k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-09-29 15:36:04 首次发布

本文链接：https://blog.csdn.net/qq_30607437/article/details/127107779

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

功能描述：当一直点击2时，切换显示隐藏，当2展开时，在点击1时，2隐藏，1显示。

<ul id="mttUl" class="mttUl">
    <li  v-for="(item,index) in aboutData.mttImg" :key="index">
        <!-- -->                      
        <img :src="item.img" :alt="item.name"  @click="stretchFn($event,index)">
    </li>
</ul> 

<script>
export default {
    data(){
        return {
            //图片点击切换
            active:0,
            removeAc:-1,
            isStatus:false,     //判断当前是展开还是收回
            currentIndex:-1,    //获取当前下标
            switchEle:0,    //切换点击元素  
        }
    },
    methods: {
        stretchFn($event,index){
            var getEle  = document.querySelectorAll('.mttUl li');   //获取所有的li元素;

            if(this.switchEle != index){

                getEle[this.switchEle].classList.remove('active');

            }

            for(let i = 0 ; i < getEle.length; i++){

                if(getEle[index].classList.contains('active')){  //是否含有active

                    getEle[index].classList.remove('active')   //移除active

                }else{

                    getEle[index].classList.add('active');    //添加active

                    this.switchEle = index;
                }
            }
        } 
    }
}
</script>

补充知识点：

$event 可以获取当前点击标签信息内容

$event.currentTarget.parentElement.getAttribute('class') //获取当前标签父元素class

$event.currentTarget.parentElement.parentElement； //获取当前元素父元素的父元素

$event.currentTarget.parentElement.children； //获取当前元素父元素下的子元素

document.querySelectorAll('.mttUl li') //获取所有的指定类名元素

getEle[index].classList.contains('active') // 判断当前元素是否含有某个类

getEle[index].classList.remove('active') // 当前元素移除某个类

getEle[index].classList.add('active'); //当前元素添加某个类