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控制swfObject应用介绍
Nov 29 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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网站判断用户是否是手机访问的方法
2013/11/01 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
代码分析Python地图坐标转换
2018/02/08 Python
python中强大的format函数实例详解
2018/12/05 Python
Python----数据预处理代码实例
2019/03/20 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
交通事故和解协议书
2014/09/25 职场文书
节水倡议书
2015/01/19 职场文书
2015暑假假期总结
2015/07/13 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL