jQuery可展开收缩三级下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery可展开收缩三级下拉菜单</title>
<style type="text/css">
*{margin: 0;padding: 0}
body{font-size: 12px;font-family: "宋体","微软雅黑";}
ul,li{list-style: none;}
a:link,a:visited{text-decoration: none;}
.list{width: 210px;border-bottom:solid 1px #316a91;margin:40px auto 0 auto;}
.list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;}
.list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold;height:36px;line-height: 36px;position: relative;}
.list ul li .inactive{ background:url(images/off.png) no-repeat 184px center;}
.list ul li .inactives{background:url(images/on.png) no-repeat 184px center;}
.list ul li ul{display: none;}
.list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;}
.list ul li ul li ul{display: none;}
.list ul li ul li a{ padding-left:20px;}
.list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; }
.last{ background-color:#d6e6f1; border-color:#6196bb; }
.list ul li ul li ul li a{ color:#316a91; padding-left:30px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.inactive').click(function(){
var twoUl = $(this).siblings('ul');
//判断当前其他的ul是否隐藏
if(twoUl.is(":hidden")){
//当前父级 的其他li，清除class
$(this).parent('li').siblings('li').removeClass('inactives');
//给当前的a标签添加clss
$(this).addClass('inactives');
//
twoUl.slideDown(100).children('li');
var threeUl = $(this).parents('li').siblings('li').children('ul');
if(threeUl.is(":visible")){
threeUl.parent('li').children('a').removeClass('inactives');
threeUl.slideUp(100);
}
}else{
//控制自身变成+号
$(this).removeClass('inactives');
//控制自身菜单下子菜单隐藏
twoUl.slideUp(100);
//控制自身子菜单变成+号
twoUl.children('li').children('ul').parent('li').children('a').addClass('inactives');
//控制自身菜单下子菜单隐藏
twoUl.children('li').children('ul').slideUp(100);
//控制同级菜单只保持一个是展开的（-号显示）
twoUl.children('li').children('a').removeClass('inactives');
}
})
});
</script>
</head>
<body>
<div class="list">
<ul class="yiji">
<li><a href="#">中国美协章程</a></li>
<li><a href="#" class="inactive">团体会员</a>
<ul style="display: none">
<li><a href="#" class="inactive active">美协机关</a>
<ul>
<li><a href="javascript:;">办公室</a></li>
<li><a href="javascript:;">人事处</a></li>
<li><a href="javascript:;">组联部</a></li>
<li><a href="javascript:;">外联部</a></li>
<li><a href="javascript:;">研究部</a></li>
<li><a href="javascript:;">维权办</a></li>
</ul>
</li>
<li class="last"><a href="#">《美术》杂志社</a></li>
</ul>
</li>
<li><a href="#" class="inactive">组织机构</a>
<ul style="display: none">
<li><a href="#" class="inactive active">美协机关</a>
<ul>
<li><a href="#">办公室</a></li>
<li><a href="#">人事处</a></li>
<li><a href="#">组联部</a></li>
<li><a href="#">外联部</a></li>
<li><a href="#">研究部</a></li>
<li><a href="#">维权办</a></li>
</ul>
</li>
<li><a href="#" class="inactive active">中国文联美术艺术中心</a>
<ul>
<li><a href="#">综合部</a></li>
<li><a href="#">大型活动部</a></li>
<li><a href="#">展览部</a></li>
<li><a href="#">艺委会工作部</a></li>
<li><a href="http://www.16sucai.com">信息资源部</a></li>
<li><a href="http://www.16sucai.com">双年展办公室</a></li>
</ul>
</li>
<li class="last"><a href="#">《美术》杂志社</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
效果预览：
jQuery 当前展开其他收缩 三级下拉菜单（转载）的更多相关文章
-
jQuery 小特效【文本框折叠隐藏，展开显示】【下拉菜单】【颜色渐变】【弹窗+遮罩】
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...
-
Django分析之三级下拉菜单选择省/市/县
今天遇到了一个一直想做却没有机会去做的功能,今天完成了便记录下来. 那这次是具体是个什么功能呢?其实还是很简单的效果,就是在用户注册的时候可以选择省/市/县,很简单的一个小功能. 那现在就开始了~首先 ...
-
(实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单
二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类: 前端技术 ...
-
美轮美奂！9款设计独特的jQuery/CSS3全新应用插件（下拉菜单、动画、图表、导航等）
今天要为大家分享9款设计非常独特的jQuery/CSS3全新应用插件,插件包含菜单.jQuery焦点图.jQuery表单.jQuery图片特效等.下面大家一起来看看吧. 1.jQuery水晶样式下拉导 ...
-
CSS打造三级下拉菜单
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
-
基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
-
JQuery -&;gt; 超级简单的下拉菜单
使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...
-
JS 下拉菜单
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
-
Axure-----三级下拉菜单的具体实现过程
********三级下拉菜单的动画效果:********** 1.选中三级菜单将其转换为动态面板,命名为treePanel,并隐藏. 2.选中二级菜单添加交互效果:[切换可见性],勾选treePane ...
随机推荐
-
oracle 创建用户
/*分为四步 *//*第1步:创建临时表空间 */create temporary tablespace ycjy tempfile 'D:\oracledata\ycjy.dbf' size 50 ...
-
读《深入php面向对象、模式与实践》有感（三）
命令模式: 第一次接触到这个命令模式的时候,感觉它很像一个简化的mvc框架.从不同的路径访问,再由控制器来判断所要调用的具体php文件. <?php class CommandContext{ ...
-
js分辨浏览器类别和版本
function BrowserInfo() { var ua = navigator.userAgent.toLowerCase(); var Sys = {}; var s; (s = ua.ma ...
-
查看当前用户名称：whoami命令
没什么可讲的,就是显示当前用户名称,效果同"id -un"命令.
-
vue 倒计时组件
<template> <span> <i v-text="msg"></i> </span></template& ...
-
Unity3d让某个物体一直正对着相机
//将以下代码绑定到相机上 using UnityEngine; using System.Collections; public class LookatScipt : MonoBehaviou ...
-
SkylineGlobe MFC C++ 开发示例代码
SkylineGlobe的SDK底层是跨平台的C++内核,面向不同平台封装原生的API,具有很高的执行效率, 下面是C++二次开发时的示例代码: #import "D:\Program Fi ...
-
关于WEB前端，你必须了解的发展方向
一.职业方向定位 首先,只有确定好自己的职业方向,才能做好职业规划.在我看来,做WEB前端技术能够找到的职业方向有以下几种: (1)资深WEB前端工程师 这个方向算是一个WEB前端最基本的选择了,在国 ...
-
Android studio 中创建AIDL Service
1.概述 AIDL在android系统中的作用 AIDL,Android Interface definition language的缩写,它是一种android内部进程通信接口的描写叙述语言, ...
-
关于 BigDecimal 的小数位的入舍去操作
BigDecimal 保留小数 的 入舍操作, 6 中 策略 : RoundingMode 里面的 枚举 和 BigDecimal 的 常量 是等价的 UP(BigDecimal.R ...