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 26 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jquery+css实现侧边导航栏效果
Jun 12 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 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
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
javascript 弹出层组件(升级版)
2011/05/12 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
JS定时器实例
2013/04/17 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
如何使用python传入不确定个数参数
2020/02/18 Python
使用django自带的user做外键的方法
2020/11/30 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
教师通用专业自荐书范文
2014/02/11 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
高二化学教学反思
2016/02/22 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
基于PyQt5制作一个群发邮件工具
2022/04/08 Python