码迷,mamicode.com
首页 > 其他好文 > 详细

关于多个折叠面板点击隐藏互不影响的实现

时间:2020-01-17 13:55:56      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:let   http   技术   nbsp   ext   for   his   next   click   

技术图片

 

 

 展开效果:

技术图片

 

折叠效果

技术图片

 

 

 

js:

    var show1 = $(‘.zyu-gjstxx .zyu-hd .span3‘);
    var height = $(‘.zyu-gjstxx .zyu-bd‘);
    var span2 = $(‘.zyu-gjstxx .zyu-hd .span2‘);
    console.log(show1);
    let index = $(this).index();
    console.log(index);
    show1.click(function () {
        $(this).parent().next().slideToggle("fast");

        if ($(this).html() == ‘收起‘) {
            $(this)[0].innerHTML = ‘展开‘;
            $(this).prev().css({ ‘transform‘: ‘rotate(180deg)‘ });
        }
        else {
            $(this)[0].innerHTML = ‘收起‘;
            $(this).prev().css({ ‘transform‘: ‘rotate(0)‘ });
        }
    });

  

关于多个折叠面板点击隐藏互不影响的实现

标签:let   http   技术   nbsp   ext   for   his   next   click   

原文地址:https://www.cnblogs.com/zaco/p/12205135.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!