<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery手风琴菜单</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<script src="http://www.cssrain.cn/demo/jquery-ui-tab/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="http://www.cssrain.cn/demo/jquery-cookie/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//点击触发
$("#sfqclick dt").click(function(){
$(this).toggleClass("bottomIco")
.next().slideToggle(300)
.siblings("dd").slideUp("slow");
$(this).siblings("dt").removeClass("bottomIco");
var index = $("#sfqclick dt").index(this);
$.cookie('the_cookie', index ); // 设置cookie
});
var cookievalue= $.cookie('the_cookie');
if( cookievalue){
$("#sfqclick dt").eq(cookievalue).click();
}
//鼠标触发&&点击
var times = null;
$("#sfqmouse dt").mouseover(function(){
var $self = $(this);
times = setTimeout(function(){
$self.addClass("bottomIco")
//注意这里的this! ,window.setTimeout(function(){} this 代表window,所以我们需要在外面先把 $(this)用变量缓存起来,在使用setTimeout(),setInterval()时,要特别注意this。以免出错。
.next().slideDown(500)
.siblings("dd").slideUp("slow");
$self.siblings().removeClass("bottomIco");
},500);
}).mouseout(function(){
if(times){
clearTimeout(times);
}
}).click(function(){
$(this).toggleClass("bottomIco")
.next().slideToggle(300)
.siblings("dd").slideUp("slow");
$(this).siblings("dt").removeClass("bottomIco");
});
});
</script>
</head>
<body>
<h1>7,最终效果 </h1>
<!--demo1 :onclick -->
<div style="float:left" >
<p><strong>onclick</strong></p>
<dl id="sfqclick">
<dt class="leftIco">MainLink-1</dt>
<dd>
<a href="#">SubLink-1</a>
<a href="#">SubLink-2</a>
<a href="#">SubLink-3</a>
</dd>
<dt class="leftIco">MainLink-2</dt>
<dd>
<a href="#">SubLink-1</a>
<a href="#">SubLink-2</a>
<a href="#">SubLink-3</a>
</dd>
<dt class="leftIco">MainLink-3</dt>
<dd>
<a href="#">SubLink-1</a>
<a href="#">SubLink-2</a>
<a href="#">SubLink-3</a>
</dd>
</dl>
</div>
<!-- demo2 :-->
<div style="float:left; margin-left:20px;">
<p><strong>mouseover&&onclick </strong></p>
<dl id="sfqmouse">
<dt class="leftIco">MainLink-1</dt>
<dd>
<a href="#">SubLink-1</a>
<a href="#">SubLink-2</a>
<a href="#">SubLink-3</a>
</dd>
<dt class="leftIco">MainLink-2</dt>
<dd>
<a href="#">SubLink-1</a>
<a href="#">SubLink-2</a>
<a href="#">SubLink-3</a>
</dd>
<dt class="leftIco">MainLink-3</dt>
<dd>
<a href="#">SubLink-1</a>
<a href="#">SubLink-2</a>
<a href="#">SubLink-3</a>
</dd>
</dl>
</div>
</body>
</html>
wanglf_uit
- 粉丝: 0
- 资源: 2
最新资源
- 混合储能系统容量优化方案:利用粒子群算法优化风光互补发电储能系统,采用超级电容与蓄电池组合方案,实现最佳容量配置 ,混合储能系统容量优化matlab 采用粒子群算法编制风光互补发电储能系统的容量优化程
- 基于协同过滤算法的微信小程序文章推荐系统-后端系统+Java、微信+微信文章推荐、文章管理
- 基于Matlab编程的两阶段鲁棒优化模型:CCG算法求解四场景概率置信区间约束优化程序,两阶段鲁棒优化模型 多场景 采用matlab编程两阶段鲁棒优化程序,考虑四个场景,模型采用列与约束生成(CCG)
- python实现简单神经网络识别数字
- 基于MATLAB和YALMIP求解器的配电网故障重构二阶锥编程研究:以33节点模型为例探究连通性与辐射性的保证及约束条件下的优化策略,配电网故障重构matlab 二阶锥 编程方法:matlab+yal
- 激励型负荷需求响应模型matlab+yalmip实现时序负荷转移与响应策略优化,目标函数详见图解,激励型负荷需求响应模型matlab 编程语言:matlab+yalmip 基本内容:采用激励型需求响应
- 基于协同过滤算法的微信小程序文章推荐系统-微信小程序+Java、微信+微信文章推荐、文章管理
- 基于Springboot的物业管理系统
- 储能技术参与二次调频的策略研究:SOC影响下的风储、风火水储联合调频与ACE响应分析,simulink 储能二次调频,风储调频,风火水储联合二次调频,储能出力受SOC影响,跟随系统ACE变化 对比
- 资源搬运:detection-Resnet50-Final.pth Aug 10, 2022
- "单相PWM整流器PI双闭环控制仿真研究:输出电压外环与网侧电流内环的Matlab Simulink与PLECS模型应用",单相PWM整流器仿真,采用PI双闭环控制 输出电压外环,网侧电流内环 mat
- 基于协同过滤算法的微信小程序文章推荐系统的设计与实现-答辩PPT+Java、微信+微信文章推荐、文章管理
- Screenshot_2025-01-23-10-09-13-826_net.csdn.csdnplus.jpg
- 《系统架构设计师考试》易混淆知识点解析:深入讲解IT领域的核心概念及其应用场景
- 基于STM32单片机的PID温控系统算法:线性加热、多段温区与高精度编程温控器应用于高端化工设备,pid温控系统算法,线性加热、多段温区、开编程温控器 stm32单片机开发,几千万人民币级别化工前处
- 基于FPGA的并行FIR滤波器设计:从MATLAB仿真到FPGA实现及ModelSim验证,基于fpga的并行fir滤波器设计,matlab仿真如下,之后进行fpga实现,并且通过modelsim仿真
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈