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的内存泄漏
Mar 04 Javascript
javascript 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
pm2 部署 node的三种方法示例
Oct 20 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
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中遍历stdclass object的实现代码
2011/06/09 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
接收键盘指令的脚本
2006/06/26 Javascript
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
react 生命周期实例分析
2020/05/18 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
铁人观后感
2015/06/16 职场文书
军训通讯稿范文
2015/07/18 职场文书