php点击按钮显示隐藏代码,jQuery中点击按钮实现显示与隐藏的方法

jQuery能够简单快捷的实现很多功能，因此在前端开发中被广泛使用，正在学习jQuery的小伙伴，你会用jQuery实现点击显示再次点击隐藏的效果吗(即jQuery二次点击隐藏)？这篇文章就和大家讲讲如何用jQuery实现点击显示和隐藏的效果，有一定的参考价值，感兴趣的小伙伴可以参考借鉴一下。

以下介绍jQuery实现点击显示和隐藏的两种方法，一个是toggle()方法，另一个是jquery中的 hide() 和 show()方法。

注：一定要记得引入jQuery文件，否则无法实现效果

一、jquery中的toggle()方法

toggle() 方法可以在其中添加两个或多个函数，然后通过 click 事件进行切换，点击时先调用第一个指定函数，再次点击时调用第二个函数，以此类推，循环调用。

语法：$(selector).toggle(function)

function指点击时需要运行的函数

实例描述：当首次点击“显示与隐藏切换”按钮时，隐藏P标签的内容，当再次点击时，显示P标签的内容，完整代码如下：

显示与隐藏切换

我可以显示也可以隐藏

啦啦啦

$(document).ready(function() {

$("button").click(function() {

$("p").toggle();

});

由下图所示，第一张图是没有点击时的效果，第二张图是第一次点击时的效果，将内容隐藏起来了。

二、jquery中的 hide() 和 show()方法

hide() 方法可以将被选元素隐藏起来，类似于 CSS 中的 display:none 属性。show() 方法可以显示隐藏的被选元素。 hide() 和 show()用法都一样，只是一个显示一个隐藏。

语法：$(selector).hide(speed,easing,callback)

speed表示显示效果的速度，是一个可选值(slow，fast，毫秒)

easing用于设置动画的不同点上元素的速度，是一个可选值(swing，linear)

callback表示show()方法执行完之后，需要执行的函数，也是一个可选值

实例描述：当点击“隐藏”按钮时，隐藏P标签的内容，当点击“显示”按钮时，显示P标签的内容，具体代码如下：

点击隐藏按钮，文字消失
点击显示按钮，文字重现

隐藏

显示

$(document).ready(function() {

$("#hide").click(function() {

$("#p1").hide();

});

$("#show").click(function() {

$("#p1").show();

});

效果如图所示：

以上各大家介绍了jQuery实现点击显示和隐藏的两种方法，一种是toggle()方法，可以通过一个按钮实现点击显示再次点击隐藏的效果；第二种方法是jquery中的 hide() 和 show()方法，通过两个按钮实现内容的显示与隐藏。工作中选择什么方法，看工作需要和个人习惯，之前没有接触过的小伙伴，一定要自己动手练习哦，希望这篇文章对爱学习的你有所帮助！

【相关教程推荐】

php点击按钮显示隐藏代码,jQuery中点击按钮实现显示与隐藏的方法相关推荐

jquery中点击事件click的写法
jquery中点击事件click的写法: <input type="button" "test1()" id="btn1" value ...
php下拉列表框是隐藏变色的代码,jQuery设置下拉框显示与隐藏效果的方法分析...
本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() ...
html点击图片弹出大图特效代码,Jquery 点击图片在弹出层显示大图
使用jquery,实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片如下: 1.点击前的效果: 2.点击后的效果: html代码如下: 弹出层图片 Js代码如下: ...
html点击隐藏divjq,jquery点击a标签怎么显示和隐藏div?详解
你知道jquery点击a标签要如何才能够显示以及隐藏div吗?下面的文章要给大家讲解的就是这个方面的内容哦,一起来看看吧. 1.新建一个html文件,命名test.html,用来讲解jquery点击a ...
ajax点击事件触发后台,使用jquery点击事件触发AJAX
我有两个下拉菜单,其中一个我试图用jquery替换单选按钮.第二个盒子通过AJAX进行更新,每次用户在第一个下拉菜单中进行选择时都会有新选项.我已经成功生成单选按钮,可以更改第一个下拉列表的值,但是当 ...
html查看更多隐藏内容,jQuery点击显示隐藏更多文字内容插件jquery.morecontent.js
插件描述:这是一款jQuery显示隐藏更多文字内容插件.该插件可以将很长的一段文字按要求进行部分隐藏和全部展示,并且可以定制隐藏和展开内容时的动画效果. jquery.morecontent.js 这 ...
jquery中点击切换的实现
项目中经常会遇到一种情况,就是点击切换,比如点击按钮,div样式为1,再点击一下按钮,div样式为2,再点击一下按钮,div样式为1.需要自定义jQuery方法toggle. // toggle方法$ ...
android界面不可见键盘隐藏功能,Android中点击隐藏软键盘最佳方法
实现功能:点击EditText,软键盘出现并且不会隐藏,点击或者触摸EditText以外的其他任何区域,软键盘被隐藏: 1.重写dispatchTouchEvent()方法,获取当前触摸事件为DOWN ...
android已经点击,【已解决】android中点击其他的（如Button等）但是EditText却没有失去焦点...
[问题] android的app中,在对于EditText已经实现了:OnFocusChangeListener mFocusChangedListener; EditText variableVal ...

php点击按钮显示隐藏代码,jQuery中点击按钮实现显示与隐藏的方法

php点击按钮显示隐藏代码,jQuery中点击按钮实现显示与隐藏的方法相关推荐

最新文章

热门文章