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二级目录的更多相关文章

  1. thinkphp 3.2 linux二级目录安装

    详解:http://document.thinkphp.cn/manual_3_2.html#url_rewrite 注意:linux系统对大小写敏感 服务器系统:linux (阿里云服务器) thi ...

  2. linux下关于Apache设置二级域名绑定二级目录的方法

    背景:对于一些论坛网站,某些目录需要制定二级域名去访问,这时候就要在apache中用二级域名绑定二级目录. 方法: 1.首先你要找到apache安装路径,在apahce安装路径下的conf文件夹中找到 ...

  3. WordPress程序伪静态规则(Nginx/Apache)及二级目录规则

    在众多CMS程序中,我们使用WORDPRESS还是比较多的,不仅仅是安全度较好,二来在于插件和主题很多,即便对于不会建站技术的用户也很简单的就可以搭建属于自己的网站项目.对于网站我们肯定是需要让有用户 ...

  4. 301重定向.htaccess规则(含二级目录跳转二级域名)

    301重定向是一种非常重要的"自动转向"技术.网址重定向最为可行的一种办法.当用户或搜索引擎向网站服务器发出浏览请求时,服务器返回的HTTP数据流中头信息(header)中的状态码 ...

  5. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

  6. 有二级目录的IIS配置

    当项目配置文件中配置了二级目录时,如下: <!--二级目录地址--> <add key="SecondCatalog" value="/hotel&qu ...

  7. zencart侧边导航点击一级目录展开二级目录

    [小 大] 2013-09-17 00:20 来源: 未知 作者:wtozz_admin 我要投稿 zencart侧边导航点击一级目录展开二级目录 zen cart Categories默认的是只显示 ...

  8. Nginx配置二级目录/路径 映射不同的反向代理和规避IP+端口访问

       当配置Nginx来映射不同的服务器 可以通过二级路径来反向代理 来解决一个外网端口实现多个服务访问. 配置如下: server { listen ; server_name demo.domai ...

  9. .Net Core小技巧 - Swagger适配虚拟目录及二级目录

    前言 随着前后端分离模式与微服务架构的出现,Web API变得越来越重要及普遍.而后出现的网关技术,使开发者更倾向于使用二级/多级目录来暴露Web API,一是暴露的端口更少,方便管理:二是在网关中可 ...

随机推荐

  1. Winform定时启动

    System.Timers.Timer t; ; int qian; int bai; int shi; int ge; public 测试定时启动() { InitializeComponent() ...

  2. c# 省市区联动

    http://www.matrixkey.com.cn/blog/article.asp?id=427 建议楼主去这里看看:http://pagetalks.com/2010/03/22/jquery ...

  3. SQL:bat批处理多个.sql文件

    一.批处理文件 update.bat       设置sqlserver的实例     记得一定要配置logfile文件 @echo off :: #### B. #### set LOGFILE=& ...

  4. 关于nohup命令

    nohup java -jar Test.jar --server.port=443 > console.log 2>&1 & 关于nohup命令 when using t ...

  5. iOS开发小工具

    基本上在Mac Appstore里面都有,很多是免费的.因为某种原因要重装Mac系统(这么多年来首次重装Mac系统),特意整理了下备忘. 1.AppIcon: 可以瞬间把图片转换为应用所需要的Icon ...

  6. CF796C Bank Hacking 思维

    Although Inzane successfully found his beloved bone, Zane, his owner, has yet to return. To search f ...

  7. swift3.0 原生网络请求

    func loadData()  { let urlString = baseURL + NewsListURL + "\(self.page)"+"/20" ...

  8. angularJs增加行的操作

    <!-- 编辑窗口 --> <div class="modal fade" id="editModal" tabindex="-1& ...

  9. 利用zookeeper生成唯一id

    package com.cxy.com.cxy.curator; import java.util.concurrent.ExecutorService; import java.util.concu ...

  10. Qt 学习之路 2(14):对话框数据传递

    Home / Qt 学习之路 2 / Qt 学习之路 2(14):对话框数据传递 Qt 学习之路 2(14):对话框数据传递  豆子  2012年9月15日  Qt 学习之路 2  53条评论 对话框 ...