为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery合上展开动作

标签:
Html5 JavaScript

全部展开样式

https://img1.sycdn.imooc.com//5df9bd960001e10603060545.jpg

合上如图所示

https://img1.sycdn.imooc.com//5df9bdc20001e64403060545.jpg

html代码

<div class="attention_wrap">
<div class="attention_head" onclick="changeDirection('1', this)">
   <div class="attention_title">考前注意事项</div>
   <img class="attention_jiantou" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./images/up_jt.png" alt="">
</div>
<div class="attention_content">
   内容部分
</div>
</div>

css就省略啦~

js代码

注意:

html代码中的点击事件的第一个参数,有多少个这样的事件,参数就需要从上往下依次增加,因为每个点击事件不能相互影响,这是本人的见解,如果各位大佬有更好的解决方案,欢迎指出,我们共同进步。

                var num1 = 1;
        var num2 = 1;
        var num3 = 1;
        function changeDirection(index, obj) {
            switch (index) {
                case '1':
                    num1++;
                    change(num1, obj)
                    break;
                case '2':
                    num2++;
                    change(num2, obj)
                    break;
                case '3':
                    num3++;
                    change(num3, obj)
                    break;
                default:
                    break;
            }
        }
        function change(mm, obj) {
            $(obj).parent().find(".attention_content").slideToggle();
            if (mm % 2 == 0) {
                $(obj).find('img').removeAttr('src')
                $(obj).find('img').attr('src', 'images/down_jt.png')
            } else {
                $(obj).find('img').removeAttr('src')
                $(obj).find('img').attr('src', 'images/up_jt.png')
            }
        }

新改

$('.attention_head').on('click', function(){
            console.log($(this))
            $(this).parent().find('.attention_content').slideToggle();
            var imgSrc = $(this).find('img').attr('src');
            if(imgSrc == './images/up_jt.png'){
                $(this).find('img').removeAttr('src');
                $(this).find('img').attr('src','./images/down_jt.png')
            }else{
                $(this).find('img').removeAttr('src');
                $(this).find('img').attr('src','./images/up_jt.png')
            }
        })


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消