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

时间：2022-05-20 23:47:29

注：对于同一个对象不超过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>

相关文章