jquery单击按钮显示或隐藏

jQuery 效果 - toggle() 方法

$(".btn1").click(function(){
  $("p").hide();
});

定义和用法

toggle() 方法切换元素的可见状态。

如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。

语法

$(selector).toggle(speed,callback,switch)
参数 描述
speed
可选。规定元素从可见到隐藏的速度(或者相反)。默认为 "0"。

可能的值:

  • 毫秒 (比如 1500)
  • "slow"
  • "normal"
  • "fast"

在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。

如果设置此参数,则无法使用 switch 参数。

callback
可选。toggle 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

switch
可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。

  • True - 显示所有元素
  • False - 隐藏所有元素

如果设置此参数,则无法使用 speed 和 callback 参数。

提示和注释

注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。

$(".btn1").click(function(){
$("p").toggle(1000);
});

$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle(true);
});
});

时间: 2024-10-30 05:48:07

jquery单击按钮显示或隐藏的相关文章

JS实现点击参数面板按钮显示或隐藏数据

当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据.如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板添加一个标签控件,控件名为lable,设置标签控件不可见,控件值为"显示". 在参数面板添加一个按钮控件,控件名为button,控件值为"只显示合计数据",并添加点击事件. 编辑点击事件,添加下面的JavaScript代码: /*获取隐藏的标签控件的值*/ var la

jquery的div显示和隐藏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jquery动画的显示与隐藏-fadeOut-fadeIn-fadeToggle-fadeTo

jquery动画的显示与隐藏-fadeOut-fadeIn-fadeToggle-fadeTo的代码: <!doctype html> <html> <head> <meta charset="gb2312"> <title>jquery动画的显示与隐藏-fadeOut-fadeIn-fadeToggle-fadeTo-title</title> <!--引入jquery文件--> <script

jsp页面做文件上传时遇到要根据登陆名按钮显示或隐藏的情况

项目遇到的情况要根据登陆的角色不同显示或隐藏按钮,因为之前没有遇到过 所以有些不知道怎么下手,百度解决了 方法如下: document.getElementById("#anniu").hide() <button id="anniu">隐藏按钮</button>

点击按钮显示或隐藏图片

<!-- 一种简单的方法 jquery的show/hide也可以 或者jquery中的toggleClass()方法 --> <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击显示或隐藏图片</title> <style> .show{ display: block; } .hide

jQuery元素的显示、隐藏及动画

1.hide()    隐藏元素        $("div").hide();            2.show()    显示元素        $("div").show();            3.toggle() 可以切换元素显示与隐藏        $("div").toggle();        4.slideDown() 滑动显示,将隐藏的元素滑动显示出来.        $("div").slideD

【jQuery/CSS】显示或隐藏元素

1. CSS分别有display.visibility两个样式可以用于隐藏或显示HTML元素 1) display样式有多个类型的值可选择,默认值为inline,隐藏后会释放元素所占用的页面空间(详见:点击打开链接) style="display: none;" document.getElementById("div1").style.display="none";//隐藏 document.getElementById("div1&

jQuery效果之显示与隐藏

.hide([duration][,complete])--目标元素的隐藏: .show([duration][,complete])--目标元素的显示: .toggle([duration][,complete])--当目标元素隐藏时则显示,否则隐藏: 注:可选参数[duration]为方法执行的时间区间:[,complete]为回调函数. <!DOCTYPE html> <html lang="zh_CN"> <head> <meta ch

js第一天 点击按钮显示与隐藏

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" > window.onload=function(){ var weibo=document.getElementById('weibo'); var content=document