小demo - 列表hide or not (含代码)

CHNMSCS

已于 2024-05-25 10:36:58 修改

阅读量344

点赞数 8

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

于 2024-05-23 20:03:06 首次发布

本文链接：https://blog.csdn.net/BSCHN123/article/details/139156562

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html>
    <head>
        <style>
            .menu {
                width: 220px;
                height: 800px;
                border: 1px solid #dddddd;
            }

            .item {
                cursor: pointer;
            }

            .menu .header {
                padding: 10px 5px;
                background-color: goldenrod;
            }

            .menu .content a {
                display: block;
                padding: 5px;
                border-bottom: 1px solid #dddddd;
            }

            .hide {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="menu">
            <div class="item">
                <div class="header" onclick="showMe(this)">EXAMPLE_ONE</div>
                <div class="content hide">
                    <a>1</a>
                    <a>2</a>
                    <a>3</a>
                    <a>4</a>
                </div>
            </div>

            <div class="item">
                <div class="header" onclick="showMe(this)">EXAMPLE_TWO</div>
                <div class="content hide">
                    <a>5</a>
                    <a>6</a>
                    <a>7</a>
                    <a>8</a>
                </div>
            </div>

            <div class="item">
                <div class="header" onclick="showMe(this)">EXAMPLE_THREE</div>
                <div class="content hide">
                    <a>9</a>
                    <a>10</a>
                    <a>11</a>
                    <a>12</a>
                </div>
            </div>

        </div>
        
        <script src="js/jquery-3.7.1.min.js"></script>
        <script>
            function showMe(self) {
                $(self).next().removeClass('hide');
                $(self).parent().siblings().find('.content').addClass('hide')
            }
        </script>

    </body>
</html>

在浏览器里就能看到页面中的左边列表有显示和未显示

也可以通过jQuery来实现

<!DOCTYPE html>
<html>
    <head>
        <style>
            .menu {
                width: 220px;
                height: 800px;
                border: 1px solid #dddddd;
            }

            .item {
                cursor: pointer;
            }

            .menu .header {
                padding: 10px 5px;
                background-color: goldenrod;
            }

            .menu .content a {
                display: block;
                padding: 5px;
                border-bottom: 1px solid #dddddd;
            }

            .hide {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="menu">
            <div class="item">
                <div class="header">EXAMPLE_ONE</div>
                <div class="content hide">
                    <a>1</a>
                    <a>2</a>
                    <a>3</a>
                    <a>4</a>
                </div>
            </div>

            <div class="item">
                <div class="header">EXAMPLE_TWO</div>
                <div class="content hide">
                    <a>5</a>
                    <a>6</a>
                    <a>7</a>
                    <a>8</a>
                </div>
            </div>

            <div class="item">
                <div class="header">EXAMPLE_THREE</div>
                <div class="content hide">
                    <a>9</a>
                    <a>10</a>
                    <a>11</a>
                    <a>12</a>
                </div>
            </div>

        </div>
        
        <script src="js/jquery-3.7.1.min.js"></script>
        <script>
            $(".header").click(function() {
                $(this).next().removeClass('hide');
                $(this).parent().siblings().find('.content').addClass('hide')
            })
        </script>

    </body>
</html>