1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<style> 7 ????????.menu{ 8 ????????????float: left;width: 30%;height: 500px;background-color: antiquewhite; 9 ????????}10 ????????.content{11 ????????????float: left;width: 70%;height: 500px;background-color: blue;12 ????????}13 ????????.title{14 ????????????background-color: black;15 ????????????color: white;16 ????????????height: 50px;17 ????????????line-height: 50px;18 ????????}19 ????????.hide{20 ????????????display: none;21 ????????}22 23 ????</style>24 </head>25 <body>26 <div>27 ????<div class="menu">28 ????????<div class="item">29 ????????????<div class="title" onclick="Func(this);">菜单一</div>30 ????????????<div class="body ">31 ????????????????<div>1.1</div>32 ????????????????<div>1.2</div>33 ????????????????<div>1.3</div>34 ????????????</div>35 ????????</div>36 ????????<div class="item">37 ?????????????<div class="title"onclick="Func(this);">菜单二</div>38 ?????????????<div class="body hide">39 ??????????????????<div>2.1</div>40 ??????????????????<div>2.2</div>41 ??????????????????<div>2.3</div>42 ?????????????</div>43 ????????</div>44 ????????<div class="item">45 ?????????????<div class="title"onclick="Func(this);">菜单三</div>46 ?????????????<div class="body hide">47 ??????????????????<div>3.1</div>48 ??????????????????<div>3.2</div>49 ??????????????????<div>3.3</div>50 ?????????????</div>51 ????????</div>52 53 ????</div>54 ????<div class="content"></div>55 </div>56 <script src="jquery-3.2.1.js"></script>57 <script>58 ????function Func(ths) {59 ????????console.log($(ths).text());60 ????????$(ths).next().removeClass(‘hide‘);61 ????????$(ths).parent().siblings().find(‘.body‘).addClass(‘hide‘);62 63 ????}64 </script>65 </body>66 </html>JQuery之左侧菜单
原文地址：https://www.cnblogs.com/yspass/p/8128015.html