jQuery手风琴的简单制作


Posted in jQuery onMay 12, 2017

首先我们先来做一个简单的jQuery的效果图,具体内容如下

css代码 如下:

<style type="text/css" media="screen">
  *{margin: 0;padding: 0;}
  ul,li{list-style:none}
   ul {
    width: 300px;
    background: yellow;
    margin: 50px auto;
  }
  ul>li{
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid #ccc;
  }
  ul>li>ol{
    background: blue;
    display: none;
  }
  ul>li>ol>li{
    line-height: 50px;
  }
</style>

HTML代码 如下:

<ul id="ul">

  <li>
    <p>jquery的核心函数</p>
    <ol>
      <li>jQuery([selector,[context]])</li>
      <li>jQuery(html,[ownerDoc])1.8</li>
      <li>jQuery(callback) </li>
      <li>jQuery.holdReady(hold)1.6+</li>
    </ol>
  </li>
  <li>
      <p>jQuery的效果</p>
    <ol>
      <li>hide 显示和隐藏</li>
      <li>slideDown 只对高度有效</li>
      <li>fadeIn 淡入效果</li>
      <li>slideToggle 淡入和淡出效果</li>
    </ol>
  </li>
  <li>
      <p>jQuery的属性</p>
    <ol>
      <li>attr 设置或返回的元素</li>
      <li>removeAttr 从每个元素中删除一个元素</li>
      <li>prop 获取第一个元素的属性</li>
      <li>removeProp prop()方法设置属性集</li>
    </ol>
  </li>
  <li>
      <p>jQuery的事件</p>
    <ol>
      <li>off 在元素上移除多个事件的处理函数</li>
      <li>bind 为每个元素绑定事件处理函数</li>
      <li>one 为每个匹配元素绑定一次性处理函数</li>
      <li>trigger 在每个匹配的元素上触发某类事件</li>
    </ol>
  </li>

</ul>

jQuery代码 如下:

<script src="jquery.min.js" type="text/javascript"charset="utf-8"></script>
<script type="text/javascript">
 $("#ul>li>p").click(function(){

  $(this).nextAll().slideDown()
  .end().parent().siblings()
  .children("ol").hide();
 }); 
</script>

效果图如下:

jQuery手风琴的简单制作

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 #jQuery
jQuery遮罩层实例讲解
May 11 #jQuery
jQuery zTree树插件动态加载实例代码
May 11 #jQuery
jQuery实现的简单在线计算器功能
May 11 #jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 #jQuery
JQuery实现定时刷新功能代码
May 09 #jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 #jQuery
You might like
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
php设计模式之单例模式代码
2016/06/11 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
Seajs源码详解分析
2019/04/02 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
python中对_init_的理解及实例解析
2019/10/11 Python
通过实例了解python property属性
2019/11/01 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
经济管理专业毕业生推荐信
2013/11/11 职场文书
交通事故私了协议书
2014/04/16 职场文书
商务日语专业自荐信
2014/04/17 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
白鹤梁导游词
2015/02/06 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
深入理解 Golang 的字符串
2022/05/04 Golang
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers