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

这是一个示例：

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle(); //toggle()方法进行显示隐藏交互事件，如果显示的就进行隐藏，如果是隐藏的就显示
});
$(".btn2").toggle(2000,function(){
$(".div2").toggle(); //callback
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>
<button class="btn2">Toggle2</button>
<div class="div1">http://www.cnblogs.com/sosoft/</div>
<div class="div2" style="display:none">柔成</div>
</body>
</html>

　　示例中用到的toggle()方法：

　　toggle() 方法切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

语法$(selector).toggle(speed,callback,switch)

PS：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

以上所述是小编给大家介绍的使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jQuery toggle()设置CSS样式

    toggle() 切换元素的可见状态. 如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为可见的. --------------------------------- 示例 切换所有段落的可见状态. HTML 代码: <p>Hello</p><p style="display: none">Hello Again</p> jQuery 代码: $("p").toggle() 结果: <p tyle=&quo

  • jquery中show()、hide()和toggle()用法实例

    本文实例讲述了jquery中show().hide()和toggle()用法.分享给大家供大家参考.具体分析如下: 这里介绍了jquery效果:show()方法.hide()方法和toggle()方法 现实应用场景:QQ面板里我的好友分组 复制代码 代码如下: <html> <head> <title>jquery效果:show()方法.hide()方法和toggle()方法</title> <script type="text/javasc

  • jquery不支持toggle()高(新)版本的问题解决

    在js代码中引入以下代码,让高版本的jquery兼容toggle事件.代码如下: /** * Replacement for toggle */ jQuery.fn.toggle = function( fn, fn2 ) { // Don't mess with animation or css toggles if ( !jQuery.isFunction( fn ) || !jQuery.isFunction( fn2 ) ) { return oldToggle.apply( this,

  • JQuery入门——事件切换之toggle()方法应用介绍

    JQuery入门——事件切换之toggle()方法应用介绍

    1.在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这个函数轮番调用,其语法如下:toggle(fn, fn2, [fn3, fn4,...]),其中fn.fn2.fn3.fn4等函数依次调用. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • jQuery中toggle()函数的使用实例

    今天遇到一个有趣的例子,将它记录下来. 一个一级菜单,里边有一个二级菜单,二级菜单是通过锚点来链接页面元素的.想要实现的效果是当点击锚点时,页面链接到相应锚点,同时二级菜单隐藏,再点击一级菜单时,继续执行.. 其中试了很多种方法都不行,最后通过读jquery的toggle函数实现了. //这样写可以 $(".nav").toggle(function(){ $(".content").slideToggle(); }); //这样写不可以 $(".nav&

  • jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)

    实例 通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素: 复制代码 代码如下: $(".btn1").click(function(){ $("p").slideToggle(); }); 定义和用法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 语法 $(selector).slideToggle(speed,callback)参

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

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

    这是一个示例: <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").cl

  • 基于jquery trigger函数无法触发a标签的两种解决方法

    起因:点击icon图标后要触发a标签的链接转跳动作,但是用 JQ 的 $('#a').trigger('click') 居然不起作用,遂百度之,总结两种方法如下: (原因:JQ 的 trigger() 方法确实无法触发 a 标签的转跳动作.) 1:JQ 方法: 对目标 a 标签内部新增一个 span 标签 ,然后给 span 标签绑定 trigger('click') 事件. $('#a').html('<span></span>').children().trigger('cli

  • jQuery基于toggle实现click触发DIV的显示与隐藏问题分析

    本文实例讲述了jQuery基于toggle实现click触发DIV的显示与隐藏.分享给大家供大家参考,具体如下: 研究了一下toggle之click触发DIV的显示与隐藏,现在把代码发上来. HTML代码: <input type="button" id="btn" title="Click me 你会看到效果" value="点击此处" /> <div id="content" styl

  • Android中实现EditText密码显示隐藏的方法

    Android中实现EditText密码显示隐藏的方法

    在Google发布了support:design:23+以后我们发现有这么一个东西TextInputLayout,先看下效果图: <android.support.design.widget.TextInputLayout android:id="@+id/pwdLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:passw

  • Bootstrap popover 实现鼠标移入移除显示隐藏功能方法

    该段js代码可实现 popover 下鼠标移入移除时显示.隐藏 popover 提示信息功能 var strContent = '<div class="media"><div class="position-left media-left"><img class="img-circle" src="/assets/images/avatar.jpg">'+ '</div>'+

  • angularJs复选框checkbox选中进行ng-show显示隐藏的方法

    如下所示: ng-true-value="1" //代表选中的时候,值为1 ng-false-value="0" //代表未选中的时候,值为0 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script

  • JQuery显示隐藏页面元素的方法总结

    在jquery中显示隐藏div方法方法有很多种,如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作,下面我来介绍. show()方法 显示出隐藏的 <p> 元素. 复制代码 代码如下: $(".btn2").click(function(){   $("p").show(); }); toggle()方法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏

  • React控制元素显示隐藏的三种方法小结

    目录 React控制元素显示隐藏的方法 方法一 方法二 方法三 React切换显示和隐藏 总结 React控制元素显示隐藏的方法 React控制元素显示和隐藏的方法目前我知道的有三种方法: 第一种是通过state变量来控制是否渲染元素,类似vue中的v-if. 第二种是通过style控制display属性,类似vue 中的v-show. 第三种是通过动态切换className. 方法一 第一种方法是通过此例中showElem变量来控制是否加载元素的,如果showElem为false,内容是直接不

  • jQuery实现IE输入框完成placeholder标签功能的方法

    jQuery实现IE输入框完成placeholder标签功能的方法

    本文实例讲述了jQuery实现IE输入框完成placeholder标签功能的方法.分享给大家供大家参考,具体如下: 如果在输入框加上placeholder="xx"属性,例如: <input type="text" placeholder="请输入关键词"/> 则可以在谷歌浏览器等高级浏览器的输入框中实现替换文本的功能,也就是得到如下图所示的对话框: 但是这个属性在WIN7默认的浏览器IE8中无法兼容,更不要说IE6了.也就是说IE里

  • jQuery过滤HTML标签并高亮显示关键字的方法

    jQuery过滤HTML标签并高亮显示关键字的方法

    本文实例讲述了jQuery过滤HTML标签并高亮显示关键字的方法.分享给大家供大家参考.具体如下: jQuery实现网页关键字过滤效果,将需要过滤的文字定义在JavaScript中,可定义多个,不过要修改JS代码为数组,这样可过滤出多个不同的关键字,本例只是为你演示一个基本的功能,更多过滤功能请自己挖掘吧. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:

随机推荐