树形导航栏(折叠)(jquery)
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>4_竖向折叠导航菜单_1</title><style type="text/css">/*全局设定*/.nav{position: absolute;top:100px;left: 100px;}*{margin: 0;padding: 0;font-size: 14px;font-size: "微软雅黑";}ul{list-style: none;}.nav a{text-decoration: none;display: block;width: 135px;height: 30px;line-height: 30px;color: #fff;text-align: center;} /*一级列表设定*/.a1{font-size: 16px;height: 35px;line-height: 35px;}.nav{background-color: #888;}.li0{border-top: 2px solid #bbb;}.li0:first-child{border: 0;}/*二级列表设定*/.nav1{display: none;background-color: #bbb;}/*伪类*/.li0:hover .a1{background-color: #444;font-weight: bold;font-size: 17px;}.nav1 a:hover{background-color: #f60;font-weight: bold;font-size: 15px;}</style>
</head>
<body><ul class="nav"><li class="li0"><a class="a1">草帽海贼团</a><ul class="nav1" id="nav101"><li class="li1"><a href="">路飞</a></li><li class="li1"><a href="">索隆</a></li><li class="li1"><a href="">山治</a></li></ul></li><li class="li0"><a class="a1">海军</a><ul class="nav1" id="nav102"><li class="li1"><a href="">黄猿</a></li><li class="li1"><a href="">青雉</a></li><li class="li1"><a href="">赤犬</a></li></ul></li><li class="li0"><a class="a1">现任王下七武海</a><ul class="nav1" id="nav103"><li class="li1"><a href="">汉库克</a></li><li class="li1"><a href="">米霍克</a></li><li class="li1"><a href="">熊</a></li><li class="li1"><a href="">巴基</a></li><li class="li1"><a href="">白胡子二世</a></li></ul></li><li class="li0"><a class="a1">革命军</a><ul class="nav1" id="nav104"><li class="li1"><a href="">龙</a></li><li class="li1"><a href="">萨博</a></li><li class="li1"><a href="">人妖王</a></li></ul></li><li class="li0"><a class="a1">现任四皇</a><ul class="nav1" id="nav105"><li class="li1"><a href="">香克斯</a></li><li class="li1"><a href="">凯多</a></li><li class="li1"><a href="">玲玲</a></li><li class="li1"><a href="">蒂奇</a></li></ul></li></ul>
</body>
<script src = "js/jquery-1.4.2.min.js"> </script>
<script>$(function(){$('.li0 .a1').each(function(){$(this).click(function(){if($(this).siblings().css('display')=="none"){console.log('weikong');$(this).siblings().css('display','block');}else{$(this).siblings().css('display','none');};})})
})
</script>
</html>
转载于:https://www.cnblogs.com/TTTK/p/6298032.html
树形导航栏(折叠)(jquery)相关推荐
- HTML语言编写的树形导航栏代码
求HTML语言编写的树形导航栏代码 代码: <HTML> <HEAD> <TITLE>树形菜单</TITLE> <STYLE type=" ...
- 树形导航栏,由树形数据生成导航栏。
最近做一个小项目,中间有一个需求是,把后台返回的树形数据生成为导航栏格式,怪我愚笨,搜了好多也没看懂.于是自己写了一个,以备以后用到. 首先,后台返回的树形数据为较为简单的二层结构.名为 data d ...
- 仿京东左侧分类导航栏实现(Jquery)
文章目录 前言 一.效果图 二.使用步骤 1.源码 jQuery CSS(需要自己导入bootstrap包) HTML 总结 前言 在做仿京东网站左侧分类导航栏的经验总结 一.效果图 二.使用步骤 1 ...
- js树形导航栏 jquery
效果: /*** @author Administrator*/ $(document).ready(function(){init();}); function init(){ $("#f ...
- html侧边导航栏折叠,HTML侧面导航栏
ul li { list-style: none; } body, html { width: 100%; height: 100%; } * { margin: 0; padding: 0; } . ...
- html导航栏切换,jQuery实现简单导航栏的样式切换
style css样式部分: ul{ margin: 0 auto; height: 50px; background-color: #369; } ul>li{ text-decoration ...
- 响应式导航栏和响应式底部
使用前端框架Semantic UI实现导航栏和底部的响应功能,效果图如下: 正常网页展示: 手机端响应: 导航栏折叠: 底部手机端展示: 前端代码如下: <!DOCTYPE html> & ...
- vue+elementui左侧导航栏
vue+elementui左侧导航栏踩坑 最近接触前端vue+elementui,记录一下 1. element官网这里:default-active="***"前面没有冒号,直接 ...
- 导航栏样式HTML,[JavaScript 实例] 导航栏几种常见样式
这里记录下导航栏几种常见的样式,仅供大家参考. 导航栏1 (原生 JS 代码) 比较常见也比较简单的导航栏 ,用的 JavaScript 原生代码,大致思路是通过改变 li 元素的 className ...
- 超好用的简单的jquery tab选项卡切换代码(点击切换和导航栏滑过)
实例1(点击切换): 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...
最新文章
- (译)如何使用box2d来做碰撞检测(且仅用来做碰撞检测)
- Linux命令netstat解读
- linux部署DM数据库的DEM系统
- BZOJ 3224: Tyvj 1728 普通平衡树【Treap】
- [react] 请说说什么是useReducer?
- vb如何定义微软服务器stul,VBScrip微软官方教程.doc
- 2020年快手美妆行业数据价值报告
- js求两圆交点_利用二项式通项公式求系数及综合运用(2)
- java 金数据推送数据_基于JAVA的黄金数据接口调用代码实例
- 基于多线程的Linux聊天室系统设计(C语言实现)
- 华为那道上机题 用?来区隔一句话的输入。
- 参数估计:矩估计和最大似然估计
- 中国综合能源服务市场盈利模式分析与投资战略规划研究报告2022-2028年
- 三种刷写LEDE等软路由固件的方法
- Can DBC文件翻译
- (生物信息学)R语言与统计学入门(四)——Fisher检验
- SAP SD跨公司销售案例教程IDOC配置
- html css img 居中显示图片,css图片垂直居中 让html img图片垂直居中的三种方法
- 解决多次点击出现蓝色背景
- 2019年终总结,一朝看尽长安花
热门文章
- Android版本名称、版本号、API level对应关系
- Win10代理自动打开无法永久关闭的问题排查和如何解决
- 【Visual C++】游戏开发笔记三十八 浅墨DirectX提高班之六 携手迈向三维世界:四大变换展身手
- 无锡学院----软件工程导论----李振宏知识点整理
- Google Chrome浏览器调试入门————转载只为自己查看方便
- 新颖的自我介绍_三句有创意的自我介绍 简短有创意的自我介绍
- idea安装插件plugin(主要针对网络连接不上的情况)
- 高考数学必背公式整理[衡水中学高中数学组]
- Microsoft 提供的 USB 驱动程序
- jQuery动画代码详解