`
tesia
  • 浏览: 31784 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

toggle()方法进行显示隐藏交互事件

阅读更多
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").toggle(); //toggle()方法进行显示隐藏交互事件,如果显示的就进行隐藏,如果是隐藏的就显示
  });
  $(".btn2").toggle(function(){
     $(".div1").toggle(); //显示
   },function(){
     $(".div2").toggle(); //隐藏
   });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
<button class="btn2">Toggle2</button>
<div class="div1">11</div>
<div class="div2">22</div>
</body>
</html>
分享到:
评论

相关推荐

    使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

    这是一个示例: &lt;... &lt;head&gt; [removed][removed] [removed] $(document).ready... //toggle()方法进行显示隐藏交互事件,如果显示的就进行隐藏,如果是隐藏的就显示 }); $(.btn2).toggle(2000,function

    jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换

    路是一步一步走出来的,知识是一点一滴积累的,记录是笔财富,来吧,一起学着总结做笔记。 这几天在写后台文章的一些页面,为了能得到更好的...利用jquery自身的toggle()函数实现层的隐藏与显示动画; 2.仿新浪、腾

    jquery-ui-1.10.4.custom.zip

    包括特效(Effect) , 显示(Show) , 隐藏(Hide) , 切换(Toggle) , 添加 Class(Add Class) , 移除 Class(Remove Class) , 切换 Class(Toggle Class) , 转换 Class(Switch Class) , 颜色动画(Color ...

    jQuery权威指南366页完整版pdf和源码打包

    4.4.1 hover()方法 4.4.2 toggle()方法 4.5 移除事件 4.6 其他事件 4.6.1 方法one() 4.6.2 方法trigger () 4.7 表单应用 4.7.1 文本框中的事件应用 4.7.2 下拉列表框中的事件应用 4.8 ...

    jQuery权威指南-源代码

    5.1 显示与隐藏/125 5.1.1 show()与hide()方法/125 5.1.2 动画效果的show()与hide()方法/126 5.1.3 toggle()方法/128 5.2 滑动/131 5.2.1 slideDown()与slideUp方法/131 5.2.2 slideToggle()方法/134 5.3 ...

    PoliQuest-Shadowlands:我的第一个WoW插件。 Shadowlands的练级插件

    键入“ / pq toggle ”或“ / poliquest toggle ”以显示/隐藏PQButton并重新放置它。 功能摘要PQButton自动将Shadowlands任务项目绑定到该按钮Quest Emote自动化自动接受并完成任务(仅限50-59级任务) 自动选择...

    fog3D:FOG3D 向轴添加 3D 雾以强调显示的 3D 绘图的深度-matlab开发

    “添加”以添加雾如果已经添加了雾,则什么也不做'remove' 完全去除雾气如果没有添加雾,则什么也不做'hide' 隐藏雾仅当已添加雾时才有效'show' 显示以前隐藏的雾仅当已添加雾时才有效'toggle' 切换雾的可见性仅当...

    dreamweaver上PHP网站开发相关插件

    设置“IE”滚动条的显示和隐藏。 Float Image.mxp 在页面中插入一个倒处飘浮的图片。 No Way Back.mxp 在页面中插入一组禁止后退的代码。 Right Click Menu Builder.mxp 设置鼠标右键的菜单。 Number Column....

    Bootstrap模态对话框的简单使用

    通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,正如 Bootstrap 插件概览 一章中所...

    PHP动态网站开发插件

    设置“IE”滚动条的显示和隐藏。 Float Image.mxp Download 点击下载 在页面中插入一个倒处飘浮的图片。 No Way Back.mxp Download 点击下载 在页面中插入一组禁止后退的代码。 Right Click Menu Builder.mxp ...

    fzf.fish:使用fzf键绑定增强fish命令行

    特征使用fzf.fish交互式地查找并插入命令行:文件路径 搜索输入:当前目录的非隐藏文件的递归列表按键绑定和助记符: Ctrl + F (对于文件而言为F ) 预览窗口:具有语法突出显示,目录内容或文件类型的文件评论如果...

    JS学习笔记相关代码-测试代码

    用法:通过 data 属性在控制器元素(比如按钮或者链接)上设置属性data-toggle="modal",同时设置 data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框(带有 id="identifier")。...

Global site tag (gtag.js) - Google Analytics