jQuery合上展开动作
全部展开样式
合上如图所示
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人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦