jq二级目录
CSS:
.qsc_nav_main .level1 {
text-align: center;
height: auto;
}
.qsc_nav_main .level1 a {
display: inline-block;
font-size: 16px;
height: 45px;
color: #fff;
}
.qsc_nav_main .level2 {
display: none;
}
.qsc_nav_main .level2 li {
text-align: center;
height: 45px;
color: #999;
} HTML:
<div class="qsc_company_nav">
<ul class="qsc_nav_main">
<li class="level1">
<a href="javascript:;" class="current">首页</a>
</li>
<li class="level1">
<a href="javascript:;">合作企业管理</a>
<ul class="level2">
<li>供应商</li>
<li>采购商</li>
</ul>
</li>
<li class="level1">
<a href="javascript:;">账款管理</a>
<ul class="level2">
<li>应收账款</li>
<li>应付账款</li>
<li>账款确认</li>
</ul>
</li>
<li class="level1">
<a href="javascript:;">借款管理</a>
<ul class="level2">
<li>借款</li>
<li>还款</li>
</ul>
</li>
<li class="level1">
<a href="javascript:;">我的中心</a>
<ul class="level2">
<li>我的中心</li>
<li>三方协议查询</li>
<li>借款协议查询</li>
</ul>
</li>
<li class="level1">
<a href="javascript:;">账户管理</a>
</li>
</ul>
</div>
JS:
/*二级菜单 显示一个二级菜单时其他的隐藏,再次点击已显示的二级菜单时,该二级菜单隐藏*/
$(".level1 > a").click(function(){
var iclass = $(this).attr("class");
if (iclass=="current"){
$(this).next().hide().prev("a").removeClass("current");
}else {
$(this).addClass("current").next().show()
.parent().siblings()
.children("a").removeClass("current").next().hide();
return false;}
});
第二种方法:可同时显示多个二级菜单,点击显示/隐藏
$(function(){
$(".level1 > a").click(function(){
$(this).next().toggle(800,function(){
//TODO
});
});
});
// $(function(){
// $(".level1 > a").click(function(){
// $(this).next().slideToggle(800,function(){ //滑动
// //TODO
// });
// });
// });

jq二级目录的更多相关文章
- thinkphp 3.2 linux二级目录安装
详解:http://document.thinkphp.cn/manual_3_2.html#url_rewrite 注意:linux系统对大小写敏感 服务器系统:linux (阿里云服务器) thi ...
- linux下关于Apache设置二级域名绑定二级目录的方法
背景:对于一些论坛网站,某些目录需要制定二级域名去访问,这时候就要在apache中用二级域名绑定二级目录. 方法: 1.首先你要找到apache安装路径,在apahce安装路径下的conf文件夹中找到 ...
- WordPress程序伪静态规则(Nginx/Apache)及二级目录规则
在众多CMS程序中,我们使用WORDPRESS还是比较多的,不仅仅是安全度较好,二来在于插件和主题很多,即便对于不会建站技术的用户也很简单的就可以搭建属于自己的网站项目.对于网站我们肯定是需要让有用户 ...
- 301重定向.htaccess规则(含二级目录跳转二级域名)
301重定向是一种非常重要的"自动转向"技术.网址重定向最为可行的一种办法.当用户或搜索引擎向网站服务器发出浏览请求时,服务器返回的HTTP数据流中头信息(header)中的状态码 ...
- bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现
bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...
- 有二级目录的IIS配置
当项目配置文件中配置了二级目录时,如下: <!--二级目录地址--> <add key="SecondCatalog" value="/hotel&qu ...
- zencart侧边导航点击一级目录展开二级目录
[小 大] 2013-09-17 00:20 来源: 未知 作者:wtozz_admin 我要投稿 zencart侧边导航点击一级目录展开二级目录 zen cart Categories默认的是只显示 ...
- Nginx配置二级目录/路径 映射不同的反向代理和规避IP+端口访问
当配置Nginx来映射不同的服务器 可以通过二级路径来反向代理 来解决一个外网端口实现多个服务访问. 配置如下: server { listen ; server_name demo.domai ...
- .Net Core小技巧 - Swagger适配虚拟目录及二级目录
前言 随着前后端分离模式与微服务架构的出现,Web API变得越来越重要及普遍.而后出现的网关技术,使开发者更倾向于使用二级/多级目录来暴露Web API,一是暴露的端口更少,方便管理:二是在网关中可 ...
随机推荐
- Visual Studio2012快捷键总结
(1)如何设置更改快捷键 1.进入工具----选项 对话框 2.选择 环境---->键盘 3.在 [显示命令包含] 下面的对话框中输入“对齐”关键字,然后就会在这个编辑框下面一个文本窗口中显 ...
- WebGoat系列实验Buffer Overflows & Code Quality & Concurrency
WebGoat系列实验Buffer Overflows & Code Quality & Concurrency Off-by-One Overflows 实验需要访问OWASP Ho ...
- Dojo Javascript 编程规范(转)
前言 相当不错的 Javascript 编程风格规范,建议大家采用此规范编写 Javascript.原文链接: http://dojotoolkit.org/developer/StyleGuide ...
- Python学习第三方库Requests: 让 HTTP 服务人类
转自官方文档:http://cn.python-requests.org/zh_CN/latest/ 快速上手 http://cn.python-requests.org/zh_CN/latest/u ...
- UI控件相关宏定义
1.显示设置 1.1 view圆角和边框 /** 设置view圆角和边框 */ #define kViewBorderRadius(View, Radius, Width, Color)\ \ [Vi ...
- Harbor安装 -- 企业级Registry仓库
(一)Harbor安装 -- 企业级Registry仓库 以下文章转自http://www.jianshu.com/p/2ebadd9a323d 根据Harbor官方描述: Harbor是一个用于存储 ...
- (原创)Codeforces Round #550 (Div. 3) D. Equalize Them All
D. Equalize Them All time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- fseek函数
函数名:fseek函数 头文件:#include<stdio.h> 功能:把与fp有关的文件位置指针放到一个指定位置. 格式: int fseek(FILE *stream, long ...
- Tomcat—Bad Request
前段时间,由于搭建环境的问题,项目暂停了一个多月,终于再次拿起来了,可是历史问题还是没有解决,再次让问题重现了一把. 上面的图片的大概意思就是:错误请求(无效主机名称) 看到这个,我一开始是兴 ...
- Python列表知识补充
1.import this Python之禅,圣经. >>> import this The Zen of Python, by Tim Peters Beautiful is b ...