在上海工作中的一些小技术总结--孔雀开屏列表
今天要做一个关于列表的展开和关闭的功能。于是写下如下的一些代码。
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>列表的开展</title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="font/iconfont.css">
<style type="text/css">
ul,li{
list-style:none;
}
a{
text-decoration: none;color:#2f2f2f;
}
</style>
</head>
<body>
<li class="nav-parent">
<a href="javascript:void(0)" ><i class="iconfont icon-zengjia"></i><a>
<ul class="children">
<li><a href="#">车票</a></li>
<li><a href="#">合肥-上海</a></li>
<li><a href="#">乘车人：木木</a></li>
</ul>
</li>
<li class="nav-parent">
<a href="javascript:void(0)" ><i class="iconfont icon-zengjia"></i><a>
<ul class="children">
<li><a href="#">车票</a></li>
<li><a href="#">合肥-上海</a></li>
<li><a href="#">乘车人：金金</a></li>
</ul>
</li>
<li class="nav-parent">
<a href="javascript:void(0)" ><i class="iconfont icon-zengjia"></i><a>
<ul class="children">
<li><a href="#">车票</a></li>
<li><a href="#">合肥-上海</a></li>
<li><a href="#">乘车人：水水</a></li>
</ul>
</li>
<li class="nav-parent">
<a href="javascript:void(0)" ><i class="iconfont icon-zengjia"></i><a>
<ul class="children">
<li><a href="#">车票</a></li>
<li><a href="#">合肥-上海</a></li>
<li><a href="#">乘车人：火火</a></li>
</ul>
</li>
<li class="nav-parent">
<a href="javascript:void(0)" ><i class="iconfont icon-zengjia"></i><a>
<ul class="children">
<li><a href="#">车票</a></li>
<li><a href="#">合肥-上海</a></li>
<li><a href="#">乘车人：土土</a></li>
</ul>
</li>
<script type="text/javascript">
(function(){
var $container = $('.children');
$container.hide();
$trigger = $(".nav-parent"); //分别获取所有的‘父子’；
$trigger.first().find('.children').show();//显示第一个’父‘的子（展开第一个）
$trigger.first().find('i').attr("class","iconfont icon-jianshao_f");
$trigger.on('click',function(e){
var $i = $(this).find('i');
//绑定点击事件。
if($(this).find('.children').is(':hidden')){
$(this).find('.children').show(300);// 显示自己
if($i.hasClass("icon-zengjia")){
$i.toggleClass("icon-zengjia icon-jianshao_f");
}
}
else if($(this).find('.children').is(':visible')){ //如果不加else ,上面的代码会在内存中展开列表。
$(this).find('.children').hide(300);
//隐藏后修改本图标。
if($i.hasClass("icon-jianshao_f")){
$i.toggleClass("icon-jianshao_f icon-zengjia");
}
}
//防止默认事件。
//e.preventDefault();
});
})();
</script>
</body>
</html>
在上海工作中的一些小技术总结--孔雀开屏列表相关推荐
- 工作中遇到的小问题的记录
工作中遇到的小问题的记录 ①Android:open failed: EEXIST (file exists) 现象: ⑴在实现一个SD卡中的文件从一个路径拷贝到另一个路径的功能时,需要测试当SD卡 ...
- 测试工作中常用在线小工具-初级篇
背景 测试过程中经常需要用到一些工具来校验数据的正确性,并且可以帮助测试人员更好的定位问题,所以我总结了我这个初级测试小白日常测试使用的小工具~ 1.在线json转换: http://www.bejs ...
- 工作中遇到的小技巧 一（暂停更新）
原来只是在网易博客里整理了一些学习中遇到的小技巧,现在开始在这里慢慢积累希望对大家有所帮助. 1.浏览器技巧: 如果浏览器的缓存已满,服务速度可能会减慢,您可能无法下载和查看附件.一下是在Intern ...
- 最近工作中遇到的某些技术问题
这几天发现自己好久没有来csdn了,想起以前想的是每天写一篇文章,现在发现,自己连一个月一篇都没写,自己还是懒和坚持不下来,这样造成自己在CSDN上产出的文章很少.下面介绍下最近工作遇到的问题,以及解 ...
- 工作中遇到的小问题以及解决办法（mongodb方面）
1.遇到循环依赖的办法 找到两个循环依赖的服务器,然后删掉或者注释其中的一个依赖包,用maven的clean和install功能如果不行的话,就用下面这个方法 然后进行删除掉就可以了. 2.修改大规模 ...
- 工作中遇到的小问题总结
简单点说就是要页面自动铺满屏幕(没有滚动条),我看之前阿里云的datav做这个效果就是这么做的. 一种是写在js页面:页面的方法 //页面随浏览器的缩放铺满窗口 /*transform:scale(0 ...
- 工作中MySql的了解到的小技巧
工作中MySql的小技巧 1. 跑脚本时,经常遇到有则更新无插入的 逻辑操作:通常情况下,来一波if()判断然后选择 更新还是插入,前两天逛论坛时发现有人在比较REPLACE INTO 和 INSET ...
- 遥感在计算机领域的应用,遥感技术在测绘工作中的应用分析
孟亭记 摘 要:在信息化发展的当下,遥感技术是众多新技术中的一种,在测绘工作中发挥着重要作用.在科学技术的快速发展中,计算机技术与互联网技术不断得到普及,大大增加了应用范围,促使遥感技术在测绘工作中的 ...
- 如何在日常工作中提升技术能力
如何在日常工作中提升技术能力 相信我们很多工程师在工作中做的最多的就是CRUD的任务,可能很多同学觉得这些工作不会有成长的机会或无法提升,其实这些大部分都是眼高手低的心里,CRUD也可以学到更多.做到 ...
最新文章
- 在IDEA中为项目引入maven中央仓库中的依赖包
- deepin安装卡死在蓝色背景_求大神帮助~安装DEEPIN系统卡在蓝色背景图什么原因...
- linux服务器启动过程
- 用包管理python代码,提高开发效率
- .Net读取Excel的数据类型不统一获取空值问题
- 虚拟Linux系统使用Windows系统oracle数据库
- 西门子滚筒洗衣机教程_西门子洗衣机优缺点
- 微型计算机原理与应用简称为啥,微型计算机原理与应用知识点总结.pdf
- 24小时改变你的人生 (1至12小时)很好的书，推荐大家有时间在网上看看。
- Unity UGUI坐标转换
- 金融管理系统测试报告（内部测试案例）
- 华为芯片设计面试题_华为公司面试硬件工程师笔试题
- 基于SpringBoot+Thymeleaf兼职招聘网站
- java美元美分兑换_美元美分换算(美分美角美元的换算)
- FBE 与FDE学习总结
- 计算机三级嵌入式学习笔记（三）
- php 禁止抓取,服务器反爬虫攻略：Apache/Nginx/PHP禁止某些User Agent抓取网站
- oracle的路由器,如何充分使用Oracle？
- laravel的使用-模型和数据库基本操作
- html音乐播放心得体会,音乐欣赏心得体会