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 常用函数
Dec 30 Javascript
jQuery each()方法的使用方法
Mar 18 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 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实现监听事件
2013/11/06 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
JS重要知识点小结
2011/11/06 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
原生js调用json方法总结
2018/02/22 Javascript
layui table 参数设置方法
2018/08/14 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
给Python初学者的一些编程技巧
2015/04/03 Python
python处理大数字的方法
2015/05/27 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python 文件查找及内容匹配方法
2018/10/25 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
django model object序列化实例
2020/03/13 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
几个Linux面试题笔试题
2016/08/01 面试题
暑期培训随笔感言
2014/03/10 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
个人工作保证书
2015/02/28 职场文书
李强感恩观后感
2015/06/17 职场文书
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫
Python学习之os包使用教程详解
2022/03/21 Python