亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

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

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消