欢迎访问士人网络天水网站建设专业服务平台
网站地图 | 联系我们
天水士人网络
天水网络公司电话
当前位置:主页 > 网站建设 > 建站知识 >

jquery如何在同一按钮上点击实现隐藏/显示之间的切换

时间:2020-05-26 | 来源:www.eshiren.com | 作者:云横心际间 | 点击: 1309 次

jquery如何在同一按钮上点击实现隐藏/显示之间的切换

  在很多应用中,都有这样的功能,点击同一个按钮可以实现div的隐藏或者显示,当然操作的并非必须是按钮或者div,不过原理是一样的,下面天水网络公司小编就通过代码实例介绍一下如何实现此功能的方法。

  方法一:通过toggle事件实现

  

  需要强调的是,toggle()在jquery1.8版本之后已经被淘汰了,如果你使用了高版本这种方法实现不了。

  方法二:通过slideToggle() 方法实现

  

  这种方法实现最简洁,但其缺陷是“隐藏”、“显示”文本的切换却无法实现。

  方法三:通过click事件hide()和show()方法实现

  

  这种方法是我们推荐的方法,不过您可根据自己的项目情况来选择使用哪一种。当然,除了上述三种,还有其他的实现方法,如通过css()或addClass()添加css样式display:block或display:none来达到项目需求。