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


Posted in Javascript onJune 12, 2016

本文实例讲述了jQuery基于toggle实现click触发DIV的显示与隐藏。分享给大家供大家参考,具体如下:

研究了一下toggle之click触发DIV的显示与隐藏,现在把代码发上来。

HTML代码:

<input type="button" id="btn" title="Click me 你会看到效果" value="点击此处" />
<div id="content" style="padding:10px; margin-top:5px; border:1px dotted #BBB;">
<p>每次点击时切换要调用的函数。<br />如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,<br />
则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
可以使用unbind("click")来删除。 </p>
</div>

JQuery代码:

完整版:

<script src="jquery.js"></script>
<script language="javascript">
$(
function(){
$("#btn").toggle(
function(){$(this).click(function(){$("#content").hide();})},
function(){$(this).click(function(){$("#content").show();})}
);
}
)
</script>

简写版(推荐):

<script src="jquery.js"></script>
<script language="javascript">
$(function(){
$("#btn").toggle(
function(){$("#content").hide();},
function(){$("#content").show();}
);
})
</script>

问题:

使用jQuery toggle时,点击后会闪一下,DIV才出来

<div >
   <img src="${ctx }/images/face.png" height="20" onclick="Effect.toggle('font_div','slide'); return false;" />
</div>
<div id="font_div" style="display: none;">
<ul>
<li>
<a style="color: black; font-size: 10px" href="#" onclick="NYSfont2('black');return false;">■</a>
</li>
</ul>
<div>

程序如上,我想点击一个图片实现font_div隐藏与显示,但是实际情况是当我点击了这个图片后font_div部分不是很顺利的就显示出来,而是先把整个font_div显示出来,然后又重新慢慢显示。就像是闪了一下,再实现我要的效果!隐藏的时候也是一样,先慢慢的隐藏,当隐藏完之后紧接着又闪一下。不知道这是怎么回事?请指教!!!!

问题补充:

问题解决了,就因为在文件里少了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
加上这一行就一点问题没有了!

解决方法:

这里给出一个简单的例子,可以达到上述效果:

<!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-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery.js"></script>
<script>
$(function(){
 $("#shift").click(function(){
$("p").slideToggle("slow");
  });
});
</script>
</head>
<body>
<div >
<input type="button" id="shift"value="点击这里" />
<p style="display:none">我想点击一个图片实现font_div隐藏与显示,但是实际情况是当我点击了这个图片后font_div部分不是很顺利的就显示出来,而是先把整个font_div显示出来,然后又重新慢慢显示。就像是闪了一下,再实现我要的效果!隐藏的时候也是一样,先慢慢的隐藏,当隐藏完之后紧接着又闪一下。不知道这是怎么回事?请指教!!!!</p>
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript DOM节点添加示例
Jul 16 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
javascript实现电商放大镜效果
Nov 23 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
javascript jquery对form元素的常见操作详解
Jun 12 #Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 #Javascript
浅谈JS中逗号运算符的用法
Jun 12 #Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 #Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 #Javascript
jQuery的each循环用法简单示例
Jun 12 #Javascript
基于jquery插件编写countdown计时器
Jun 12 #Javascript
You might like
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
javascript json 新手入门文档
2009/12/03 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
Python远程方法调用实现过程解析
2020/07/28 Python
解决c++调用python中文乱码问题
2020/07/29 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
给水工程专业毕业生自荐信
2014/01/28 职场文书
项目建议书范文
2014/05/12 职场文书
美丽心灵观后感
2015/06/01 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
神州牡丹园的导游词
2019/11/20 职场文书