jquery点击来回切换img图片的src

最新推荐文章于 2023-09-30 10:34:48 发布

原创最新推荐文章于 2023-09-30 10:34:48 发布 · 6.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#小技术

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种基于HTML和JavaScript实现的下拉选择框交互效果。通过点击箭头图标，内容区域会展开或隐藏，并且箭头方向会随之改变，提供了一种简单而实用的用户界面元素操作方式。

点击下箭头隐藏内容展开变为上箭头
在这里插入图片描述
再点击上箭头内容隐藏变为下箭头

html部分

<div class="tit-box">
    <p>请选择奖项等级</p>
    <img src="./images/web_dropdown_select.png" alt="">
</div>

js部分

$(function(){
    $('.tit-box img').click(function(){
    	// 内容的展示隐藏
        $('.selects').slideToggle();
   		
   		// 箭头图片切换
     if($('.tit-box img').attr('src')=='./images/web_dropdown_select.png'){
         $('.tit-box img').attr('src','./images/web_dropdown_normal.png');
     }else{
         $('.tit-box img').attr('src','./images/web_dropdown_select.png');
     }
   })
})