JS 文件<script type="text/javascript">
$(document).ready(function(){$(".level1 > a").click(function(){$(this).addClass("current")   //给当前元素添加"current"样式.next().show()                //下一个元素显示.parent().siblings().children("a").removeClass("current")        //父元素的兄弟元素的子元素<a>移除"current"样式.next().hide();                //它们的下一个元素隐藏return false;});
});
</script>

HTML文件<div class="box"><ul class="menu"><li class="level1">
            <a href="#none">衬衫</a><ul class="level2"><li><a href="#none">短袖衬衫</a></li><li><a href="#none">长袖衬衫</a></li><li><a href="#none">短袖T恤</a></li><li><a href="#none">长袖T恤</a></li></ul></li><li class="level1"><a href="#none">卫衣</a><ul class="level2"><li><a href="#none">开襟卫衣</a></li><li><a href="#none">套头卫衣</a></li><li><a href="#none">运动卫衣</a></li><li><a href="#none">童装卫衣</a></li></ul></li><li class="level1"><a href="#none">裤子</a><ul class="level2"><li><a href="#none">短裤</a></li><li><a href="#none">休闲裤</a></li><li><a href="#none">牛仔裤</a></li><li><a href="#none">免烫卡其裤</a></li></ul></li></ul>
</div>

CSS文件

/* reset */
body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
input,select{font-size:12px;line-height:16px;}
img{border:0;}
ul,li{list-style-type:none;}
a {color:#00007F;text-decoration:none;}
a:hover {color:#bd0a01;text-decoration:underline;}.box {width: 150px;margin: 0 auto;
}.menu{overflow:hidden;border-color: #C4D5DF;border-style: solid;border-width: 0 1px 1px;
}/* lv1 */
.menu li.level1 a{display: block;height: 28px;line-height: 28px;background:#EBF3F8;font-weight:700;color: #5893B7;text-indent: 14px;border-top: 1px solid #C4D5DF;
}
.menu li.level1 a:hover{text-decoration:none;}
.menu li.level1 a.current{background:#B1D7EF;}
/* lv2 */
.menu li ul{overflow:hidden;}
.menu li ul.level2{display:none;}
.menu li ul.level2 li a{display: block;height: 28px;line-height: 28px;background:#ffffff;font-weight:400;color: #42556B;text-indent: 18px;border-top: 0px solid #ffffff;overflow: hidden;
}
.menu li ul.level2 li a:hover{color:#f60;}

jquery 导航栏目相关推荐

  1. React Native 的顶部导航栏和底部导航栏目

    说来也是惭愧,本来关于底部导航栏,我已经写过一篇博客,只不过那篇更偏向于入门一些,当时一实现功能之后就迫不及待的分享给大家了.地址在这儿:http://blog.csdn.net/LJFPHP/art ...

  2. jQuery导航切换功能

    jQuery导航切换功能 Css ----------------------------------------------------------------------------------- ...

  3. 36个引人注目JQuery导航菜单

    1.jQuery 选项卡界面 / 选项卡结构菜单教程 这种类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心 ...

  4. 微信小程序设置底部导航栏目方法

    微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了 ...

  5. 推荐40个简单的 jQuery 导航插件和教程【下篇】

    在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程.导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多 ...

  6. phpcmsV9导航栏目点击跳转始终是localhost首页 bug - 分析篇

    文章目录 发现点哪个栏目却都跳到了localhost首页! 一开始,我以为?是因为在后台给栏目添加设置了show模板? 后来发现,并不是我想的那样.在后台多更新了几次各种缓存,浏览器多Ctrl+F5刷 ...

  7. phpcmsV9一、二级导航栏目loop循环输出、当前高亮显示

    本实例解决问题 一级.二级导航栏目loop循环输出的实现方法: 判断是否为当前栏目 - 并高亮显示当前栏目的{if}{/if}方法设置: 栏目"是否在导航显示"的设置含义与效果差别 ...

  8. 收藏一些 JQuery 导航插件

    本文收集了10款极具创意的jQuery导航插件,包含上下文菜单键. 浮动.下拉和其他自定义等,供开发者学习.参考. 1. AoG Carousel 类似于3D旋转转盘菜单.可利用鼠标进行任意操作.在线 ...

  9. jQuery导航插件One-Page-Nav演示-显示命名锚记

    jQuery导航插件One-Page-Nav演示-显示命名锚记 简介 使用 选项 示例 推荐 简介 电商网站的分类比较明确,比如1楼是手机通讯产品,2楼是家用电器,3楼是服装鞋包等等,旁边还会有一个固 ...

最新文章

  1. 使用Process Explorer查看托管进程的性能记数器
  2. 陶哲轩实分析 例 1.2.12 洛必达法则使用注意事项
  3. Altium Designer原理图和PCB中对元件垂直、水平镜像翻转
  4. python3 计时性能测试 %timeit %%timeit
  5. Mysql 乱码的解决
  6. 上传图片动态预览(兼容主流浏览器)
  7. eclipse自动补全的设置
  8. 用UIpickView实现省市的联动
  9. C语言之加入头文件<stdbool.h>可以使用true和false
  10. 对编程人员我想说:多做 多实践 多写代码
  11. mysql基础以优化
  12. 阿里面试记录-程序上机
  13. 2021-09-03DIEN分成两步去抓取用户的兴趣演化:1兴趣抽取层 去抽取基于用户行为序列的兴趣序列2兴趣演化层 跟target item相关
  14. web全栈前端学习路线-20个真实web开发项目集合
  15. 模板消息php40008,企业微信发送模板消息 40008 Warning: wrong json format. ?
  16. h5跳转高德百度导航
  17. win10找不到计算机配置文件,Win10个性化设置无法打开提示该文件没有与之关联的程序怎么办?...
  18. 打造自己的HelloDrone 无人机APP过程《3》
  19. Google Indexing API 推送 (避免踩坑)
  20. Designing Network Design Spaces,译读

热门文章

  1. jQuery图片轮播特效
  2. set dict tuple 内置方法
  3. Turtle-可视化界面画圣诞树
  4. layui给select下拉框赋值
  5. (21) java web的struts2框架的使用-Action实现的三种方式
  6. java ee期末项目相关
  7. anaconda应答文件
  8. HTML td 标签的 colspan 属性
  9. 啦啦啦 啦啦 啦 啦 啦 啦啦 啦 啦 啦
  10. iOS启动屏 ➕ 闪屏的方法