注：对于同一个对象不超过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"并隐藏。

全部过程：

  1. <!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();
                })
            })
  2.  
  3.     </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. pycharm 使用教程

    本文为大家讲解的是pycharm 的安装和首次使用,PyCharm 是我用过的python编辑器中,比较顺手的一个.而且可以跨平台,在macos和windows下面都可以用,这点比较好.感兴趣的同学参 ...

  2. hydra 使用总结

    参考链接: http://blog.csdn.net/MarshalEagle/article/details/51896083 https://www.waitalone.cn/hydra-v8-w ...

  3. Markdown超链接及脚注

    Markdown链接及脚注 [时间:2017-02] [状态:Open] [关键词:markdown,标记语言,页内链接,超链接,脚注] 本文内容来自Markdown 11种基本语法,仅对其中我不熟悉 ...

  4. 反卷积（deconvolution）

    deconvolution讲解论文链接:https://arxiv.org/abs/1609.07009 关于conv和deconvoluton的另一个讲解链接:http://deeplearning ...

  5. uio.c 分析【转】

    转自:https://blog.csdn.net/ganggexiongqi/article/details/6737647 版权声明:本文为博主原创文章,未经博主允许不得转载. https://bl ...

  6. python3+selenium框架设计02-自动化测试框架需要什么

    什么是自动化测试框架 自动化测试框架能够提供便利给用户高效完成一些事情,比如,结构清晰开发脚本,多种方式.平台执行脚本,良好的日志和报告去跟踪脚本执行结果. 关于自动化测试框架的定义有很多,在我大致理 ...

  7. EntityFramework之事务

    一.EF事务 引用程序集 using System.Transactions; 用法 var writer = new System.IO.StringWriter(); try { using (v ...

  8. 增加一台web机注意事项

    2017年4月18日 15:23:57 星期二 增加一台web机时, 先不要挂载进lb 1. 需要将此机器的ip加入到其它服务的白名单内: 数据库, 缓存, 第三方接口等 2. 绑定hosts, 点点 ...

  9. javascript for循环 日期 select

    2016年12月28日 20:01:54 星期三 html: <a href="aaaa">AAAA</a> <a href="bbbb&q ...

  10. MVC之基架

    参考 ASP.NET MVC5 高级编程(第5版) 定义: 通过对话框生成视图及控制器的模版,这个过程叫做“基架”. 基架可以为应用程序的创建.读取.更新和删除(CRUB)功能生成所需的样板代码.基架 ...