jQuery筛选器&重写后台管理左侧菜单示例

up1292

于 2022-09-26 15:20:34 发布

阅读量322

点赞数

分类专栏： jQuery 文章标签： java javascript 前端

本文链接：https://blog.csdn.net/up1292/article/details/127053601

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

重点掌握以下筛选器：

1、$('.c1').next() 当前标签的下一个标签

2、$('.c1').nextAll() 当前标签下的所有标签

3、$('.c1').prev() 当前标签的上一个标签

4、$('.c1').prevAll() 当前标签上的所有标签

5、$('.c1').parent() 当前标签的父标签

6、$('.c1').parents() 当前标签所有上层标签，直至<html>

7、$('.c1').children() 当前标签的子标签集

8、$('.c1').siblings() 当前标签的兄弟标签集

9、$('.c1').find() 查找：find('.c2')

后台管理左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display:none;
        }
        .header{
            background-color: blue;
        }
        .content{
            background-color: dodgerblue;
        }
    </style>
</head>
<body style="margin:0";>
    <div style="width:300px;">
        <div class="item">
            <div class="header">菜单1</div>
            <div class="content hide">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div class="header">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>
        <div class="item">
            <div class="header">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(".header").click(function(){
            $(this).next().removeClass('hide');     //找到当前标签的下一个标签，删除hide样式
            $(this).parent().siblings().find('.content').addClass('hide');      //找到当前标签的父标签的兄弟标签集中有content样式的标签，添加hide标签
            //jQuery支持链式编程，也可以用以下一行搞定
            // $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
        })
    </script>
</body>
</html>