jquery003-左侧菜单()

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #menu{            position: absolute;            top: 200px;            left: 10px;            bottom: 10px;            overflow: auto;        }        .header{            width: 200px;            height: 60px;            background-color: #e75e15;            line-height: 60px;            border: 1px solid rebeccapurple;            margin: 1px 0;        }        .hide{            display: none;        }    </style></head><body style="width: 980px;margin: 0 auto">    <div id="menu">        <div class="item">            <div class="header">菜单一</div>            <div class="content hide">内容一</div>            <div class="content hide">内容二</div>        </div>        <div class="item">            <div class="header">菜单二</div>            <div class="content ">内容一</div>            <div class="content">内容二</div>        </div>        <div class="item">            <div class="header">菜单三</div>            <div class="content hide">内容一</div>            <div class="content hide">内容二</div>        </div>    </div>    <script src="jquery3.6.1.js"></script>    <script>        $('#menu .header').click(function (){            $(this).nextAll().removeClass('hide').parent().siblings().find('.content').addClass('hide');        });    </script></body></html>
————————
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #menu{            position: absolute;            top: 200px;            left: 10px;            bottom: 10px;            overflow: auto;        }        .header{            width: 200px;            height: 60px;            background-color: #e75e15;            line-height: 60px;            border: 1px solid rebeccapurple;            margin: 1px 0;        }        .hide{            display: none;        }    </style></head><body style="width: 980px;margin: 0 auto">    <div id="menu">        <div class="item">            <div class="header">菜单一</div>            <div class="content hide">内容一</div>            <div class="content hide">内容二</div>        </div>        <div class="item">            <div class="header">菜单二</div>            <div class="content ">内容一</div>            <div class="content">内容二</div>        </div>        <div class="item">            <div class="header">菜单三</div>            <div class="content hide">内容一</div>            <div class="content hide">内容二</div>        </div>    </div>    <script src="jquery3.6.1.js"></script>    <script>        $('#menu .header').click(function (){            $(this).nextAll().removeClass('hide').parent().siblings().find('.content').addClass('hide');        });    </script></body></html>