注：对于同一个对象不超过3个操作的，可直接写成一行，超

过3个操作的建议每行写一个操作。这样可读性较强，可提高代码的可读性和可维护性

核心代码：

$(".has_children").click(function(){
$(this).addClass("highlight") //为当前元素增加highlight类
     .children("a").show().end() //将子节点的<a>元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight")获取元素的兄弟元素，并去掉它们的highlight类
     .children("a").hide();//将兄弟元素下的<a>元素隐藏
})

以上js代码的意思为：当点击含有class名为“has_children

”的节点时，其子节点元素“a”添加上类“highlight”并且

显示，同时该同辈元素“a”去掉class"highlight"并隐藏。

全部过程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery的第一个demo</title>
    <script src="js/jquery-2.1.1.min.js" rel="script"></script>
    <style>
        .menu{
            width: 200px;
        }
        .has_children{
            background: #f00;
            color: yellow;
            cursor: pointer;
        }
        .highlight{
            background: #647787;
            color: #f0f;
        }
          div{
              padding: 0;
          margin: 10px 0;
          }
        div a{
            background: #1a272f;
            color: #fff;
            display: none;
            width: 200px;
            float: left;
        }
    </style>
    <script>
        $(document).ready(function () {
            $(".has_children").click(function(){
                $(this).addClass("highlight").children("a").show().end().siblings().
                removeClass("highlight").children("a").hide();
            })
        })

    </script>
    </head>
<body>
<div class="menu">
<div class="has_children">
    <span>第一个节点</span>
    <a>子节点1</a>
    <a>子节点2</a>
    <a>子节点3</a>
    <a>子节点4</a>
</div>
<div class="has_children">
    <span>第二个节点</span>
    <a>子节点1</a>
    <a>子节点2</a>
    <a>子节点3</a>
    <a>子节点4</a>
</div>
<div class="has_children">
    <span>第三个节点</span>
    <a>子节点1</a>
    <a>子节点2</a>
    <a>子节点3</a>
    <a>子节点4</a>
</div>
</div>
</body>
</html>

jQuery之导航菜单（点击该父节点时子节点显示，同时子节点的同级隐藏，但是同级的父节点始终显示）的更多相关文章

  1. jQuery弹性滑动导航菜单实现思路及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...

  2. jquery 滑块导航菜单

    带滑块的导航菜单,鼠标悬浮时,滑块会移动至鼠标位置,离开时,滑块会回到原来的位置,点击菜单之后滑块会停留在被点击菜单位置,等待下一次的鼠标悬浮事件或者点击事件,效果图: 图片效果不行,直接上代码: & ...

  3. JQuery 实现导航菜单的高亮显示

    需求是这样的 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 网上说的思路是这样的: 在菜单层的 ...

  4. jQuery滑动导航菜单

    js: $(function(){ $("ul.sub").parent().append("<span></span>"); $(&q ...

  5. 导航菜单点击图片切换--jquery

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 用js实现导航菜单点击切换选中时高亮状态

    随着用户点击导航或菜单上不同的页面,出现此选项高亮显示或变为一个新的样式是经常用到的.实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的 ...

  7. jquery 树形导航菜单无限级

    转自:http://www.jb51.net/article/71615.htm 侵删<!DOCTYPE html> <html lang="en"> &l ...

  8. 用js实现超链接导航菜单点击切换选中时的状态

    项目中使用到点解导航切换不同的颜色,如果只是li选项卡还好办,这次用到的超链接选项卡,因为a链接每次点击都会刷新,所以浏览器记不住点击的状态,也没法切换点击状态,因为项目中有好多地方要用到,在网上找了 ...

  9. jQuery 浮动导航菜单（购物网站商品类型）

    单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图 男装.女装.美妆等. 这种菜单功能分为两部分: 1.点击菜单项,网页滚动到对应位置,可简单 ...

随机推荐

  1. shell编程 之 test命令

    shell编程里的测试test命令基本可以分为3种数据类型,每种都不一样.个人更倾向于理解为条件语句的写法规则,就是test加条件加判断语句. 1 数值类型 基本可以分为6个判断:-eq等于,-ne不 ...

  2. 2017-2018-2 20165221 实验三《敏捷开发与XP实践》实验报告

    实验报告封面 姓名:谭笑 学号:20165221 班级:1652班 实验名称: JAVA--敏捷开发与XP实践 指导老师:娄嘉鹏 试验时间:15:35--17:15 实验性质:选修 实验组次:21 实 ...

  3. Eclipse同时显示两个编辑窗口

    同时打开两个编辑窗口,点住一个窗口,拖到编辑窗口的最下面时或者最右面,会出现两个两个编辑窗口的轮廓,松开即可!

  4. NOIP2018D1T1 铺设道路

    原题:NOIP2013D1T1 积木大赛 题目地址:P5019 铺设道路 思路:玄学瞎搞 将每块区域插入一个小根堆,这里的小根堆用优先队列实现,即运用一个 \(pair\) , \(first\) 为 ...

  5. 20165325《Java程序设计》第九周学习总结

    一.教材学习笔记 ch13 1.URL类 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符,使用URL创建对象的应用程序称作客户端程序. 一个URL对象通常包含最基本 ...

  6. 【转】Python之正则表达式（re模块）

    [转]Python之正则表达式(re模块) 本节内容 re模块介绍 使用re模块的步骤 re模块简单应用示例 关于匹配对象的说明 说说正则表达式字符串前的r前缀 re模块综合应用实例 参考文档 提示: ...

  7. shell 在手分析服务器日志【转】

    自己的小网站跑在阿里云的 ECS 上面, 偶尔也去分析分析自己网站服务器日志,看看网站的访问量.看看有没有黑阔搞破坏!于是收集,整理一些服务器日志分析命令,大家可以试试! awk '{print $1 ...

  8. python3+selenium入门10-表单切换

    当元素在ifarm或farm中时,需要先进入到表单中,然后才能定位元素进行操作.直接对元素定位.会提示元素无法找到. <!DOCTYPE html> <html> <he ...

  9. 题解-BOI 2004 Sequence

    Problem bzoj & Luogu 题目大意: 给定序列\(\{a_i\}\),求一个严格递增序列\(\{b_i\}\),使得\(\sum \bigl |a_i-b_i\bigr|\)最 ...

  10. 带你十分钟快速构建好 SpringBoot + SSM 框架

    目前最主流的 java web 框架应该是 SSM,而 SSM 框架由于更轻便与灵活目前受到了许多人的青睐.而 SpringBoot 的轻量化,简化项目配置, 没有 XML 配置要求等优点现在也得到了 ...