jQuery简单实现列表隐藏和显示效果示例
本文实例讲述了jQuery简单实现列表隐藏和显示效果。分享给大家供大家参考，具体如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏和显示</title>
<style>
*{ padding: 0; margin: 0;}
li{ list-style-type: none;}
body{ margin: 50px;}
a{ text-decoration: none; color:#f00;}
ul{ border:3px solid #abcdef; width: 200px; display: none;}
span{cursor: pointer;}
</style>
</head>
<body>
<span>更多</span>
<ul>
<li><a href="#">列表一</a></li>
<li><a href="#">列表二</a></li>
<li><a href="#">列表三</a></li>
<li><a href="#">列表四</a></li>
<li><a href="#">列表五</a></li>
</ul>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
var oBtn = $('span');
var oContent = $('ul');
oBtn.click(function(){
/*if(oContent.is(':visible')){
oContent.slideUp();
}else{
oContent.slideDown();
}*/
oContent.slideToggle();
});
});
</script>
</body>
</html>
运行效果图如下：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
-
本文向大家介绍jQuery隐藏和显示效果实现，包括了jQuery隐藏和显示效果实现的使用技巧和注意事项，需要的朋友参考一下 实例 jQuery hide() 简单的jQuery hide()方法演示。 jQuery hide() 另一个hide()实例。演示如何隐藏文本。 jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示
-
本文向大家介绍jQuery实现根据类型自动显示和隐藏表单，包括了jQuery实现根据类型自动显示和隐藏表单的使用技巧和注意事项，需要的朋友参考一下 jquery实现表单根据单选按钮进行字段的动画切换，昨天写的，感觉比起初学时写的js/jquery有了很大进步。。在最大化扩展性的情况下经可能使代码精简。 html js 以上所述就是本文的全部内容了，希望大家能够喜欢。
-
主要内容：实例,jQuery hide() 和 show(),实例,实例,实例,jQuery toggle(),实例隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！ 因为时间是宝贵的，我们提供快捷方便的学习方法。 在小牛知识库,你可以学习需要的知识。 实例 jQuery hide() 简单的jQuery hide()方法演示。 jQuery hide() 另一个hide()实例。演示如何隐藏文本。 jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和
-
本文向大家介绍jQuery动画显示和隐藏效果实例演示(附demo源码下载)，包括了jQuery动画显示和隐藏效果实例演示(附demo源码下载)的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery动画显示和隐藏效果。分享给大家供大家参考，具体如下： 运行效果截图如下： 点击此处查看在线演示。 完整实例代码点击此处本站下载。 具体代码如下： 希望本文所述对大家jQuery程序设计有所帮
-
本文向大家介绍简单实现JSP分页显示效果，包括了简单实现JSP分页显示效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JSP分页显示效果的具体代码，供大家参考，具体内容如下 1、mysql的limit关键字 （DAO） tablename 就是要分页显示的那张表的名称； startPoint 就是起始的位置 -1； numberPerPage 就是一页显示的条数。 例如： sel
-
本文向大家介绍jquery显示隐藏元素的实现代码，包括了jquery显示隐藏元素的实现代码的使用技巧和注意事项，需要的朋友参考一下 或 它是个集合肯定没有display属性 $("#firstStep").hide(500);而且可以设置时间；("#firstStep").hide(500);而且可以设置时间； $(".class").css('display','block'); $("#id