jQuery切换事件
2015-07-16 14:23
561 查看
有html页面内容如下:
<body> <h5 id="hh">关于jQuery的介绍</h5> <p id="p1">jQuery是一门前端编程语言</p> </body>
需要实现点击标题显示和隐藏段落的功能。
第一种通过点击方法实现,代码如下,需要注意is(":visible")的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../script/jquery-2.1.4.js"></script>
<title></title>
<script>
$(function(){
$("#hh").click(function(){
if($(this).next().is(":visible")){
$(this).next().hide();
}
else{
$(this).next().show();
}
});
});
</script>
</head>
<body> <h5 id="hh">关于jQuery的介绍</h5> <p id="p1">jQuery是一门前端编程语言</p> </body>
</html>
第二种方法通过toggle使用,当toggle代码如下时,效果是先出现一段文字
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../script/jquery-2.1.4.js"></script>
<title>toggle</title>
<script>
$(function(){
$("#hh").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
</script>
</head>
<body> <h5 id="hh">关于jQuery的介绍</h5> <p id="p1">jQuery是一门前端编程语言</p> </body>
</html>
而要实现点击切换的效果,新的jQuery代码应该是:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../script/jquery-2.1.4.js"></script>
<title>toggle</title>
<script>
$(function(){
$("#hh").click(function(){
$(this).next().toggle(600);
},function(){
$(this).next().toggle(600);
})
})
</script>
</head>
<body> <h5 id="hh">关于jQuery的介绍</h5> <p id="p1">jQuery是一门前端编程语言</p> </body>
</html>
相关文章推荐
- 效果超棒的 jQuery 特效
- 15款创建漂亮幻灯片的 jQuery 插件
- jquery显示json数据
- 基于JQuery实现的文本框自动填充功能
- jQuery-鼠标经过显示大图并跟随鼠标效果插件
- 模仿jquery框架源码
- jquery css3动态背景用户登录界面特效
- 模仿jquery框架源码 -生长---跨域访问
- 利用jQuery对无序列表排序
- 模仿jquery框架源码 -成熟---选择器
- 介绍jquery.validate.js简单实用的表单验证框架
- jquery链式语法
- jquery跟DOM转换
- jquery选择器
- 基本jquery
- jquery bind 传参数
- jQuery.ajaxSetup() 详解
- 事件委托&jQuery on
- jValidate 基于jQuery的表单验证插件
- 基于jQuery的窗口插件:jMessageBox