jquery简单插件到复杂插件(2)--简单手风琴

手风琴就是展示与隐藏

<div id="dataContent">
            <div class="dataLeft fl">
                <div id="accordion">
                    <p class="accordionP">数据展示</p>
                    <ul >
                        <li class="accordionOne aY">实况预报
                            <ul class="accordioTwo" >
                                <li><a href="">三小时预报</a></li>
                                <li><a href="">五小时预报</a></li>
                                <li><a href="">七小时预报</a></li>
                                <li><a href="">十小时预报</a></li>
                            </ul>
                        </li>
                        <li class="accordionOne aW">
                            <a href="">格点预报</a>
                        </li>
                        <li class="accordionOne aW">
                            <a href="">站点数据</a>
                        </li>
                    </ul>
                </div>
            </div>
//手风琴js
$(function(){
    $(‘.accordionOne‘).on(‘click‘,function(e){
            $(this).children().toggle(500);
    });
});
时间: 2024-10-27 05:43:37

jquery简单插件到复杂插件(2)--简单手风琴的相关文章

一个简单的页面弹窗插件 jquery.pageMsgFrame.js

页面弹窗是网站中常用的交互效果,它可以强提示网站的某些信息给用户,或者作用于某些信息的修改等等功能. 这几天在做一个项目的时候,就顺捎把这个插件写一下,栽棵树,自己乘凉吧. 原创博文,转载请注明出处:http://www.cnblogs.com/dereksunok/p/3724764.html html代码: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5

javaScript简单表单验证插件

 Validator = { Require : /.+/, Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,     Phone : /^(0[1-9][0-9]{1,2}-[1-9][0-9]{6,7})$/, Mobile : /^((\(\d{3}\))|(\d{3}\-))?1[3,5,8]\d{9}$/, Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[

Notepad++搭建Python简单开发环境(nppexec插件版)

Notepad++搭建Python简单开发环境(nppexec插件版)  原地址:http://blog.sina.com.cn/s/blog_55eb21950101daty.html 1.打开Notepad++,选择菜单Plugin(插件)->Plugin Manager->Show Plugin Manager,打开插件管理器,在”Available”选项卡中找到NppExec2.勾选NppExec,然后Install,下载完成后,一切Yes,OK3.重新启动Notepad++,NppE

一个简单的MariaDB认证插件demo

代码地址如下:http://www.demodashi.com/demo/13076.html 一.前言 众所周知(其实可能很多人不知道)MariaDB支持插件认证.在MariaDB中新建用户,常见的语句是: CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 这样创建的用户,登录时的认证方式是密码.其实创建用户的语句还可以是: CREATE USER 'username'@'host' IDENTIFIED VIA 'pluginna

045-利用反射机制,简单的实现PHP插件模式

<?php //利用反射机制,简单的实现PHP插件模式 # 假设,我们有一款开源产品,所有开发者都必须在我定制的需求之上,进行二次开发, # 而开发完成后的新模块,就是一个不一样的新插件,可以放在特定的位置进行自动加载 #这是我们的开源产品 interface Demo{ # 所有插件都必须实现这个方法 public function msg(); } #这是小明开发的插件-1 class xiaoming implements Demo{ public function msg(){ echo

jquery validate 表单验证插件

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

【锋利的jQuery】表单验证插件踩坑

和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在form中class类名中添加"required","email"等去作为验证时读取的参数. 4. 调用代码: $("#commentform").validate(); 很不幸,报错了.前端有个说法是学新不学旧,这里就不去深究原因,直接提供最新的写法

10个免费的响应式jQuery Carousel 轮播图插件

jQuery Carousel 轮播图插件可以给网站创建华丽的动画效果,这里列出的10个jQuery Carousel 轮播图插件都是响应式的,并且可以免费使用. 1. ItemSlide.js 简单的触摸式Carousel 轮播图插件,提供多种样式的旋转动画,如向上滑动,基于全屏的触摸滑动,左右滑动等. 2. Liquid 每当Liquid 容器的大小改变时,都会重新调整列表中的项目数,以适应新的宽度. 3. jCarousel jCarousel 是一个用来控制水平或垂直方向上列表项的jQu

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus