<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./jquery.min.js"></script> <style> .color{color: red;} .bak{background: red;} .nav{position: relative;} .linkSibling{display: none;position: absolute;width: 200px;height: 200px;top:0;left:20px;border:1px #000 solid;} .linkSibling div{float: left;border:1px #000 solid} .linkSibling div div{display: none; position: absolute;width: 100px;height: 100px;border: 1px #000 solid; top:30px;left:0px} </style> </head> <body> <div class="nav"> <div> <div class=‘link‘>1</div> <div class="linkSibling"> <div class="linkSiblingC bak">11 <div class="linkSiblingCC" style="display: block;">1111</div></div> <div class="linkSiblingC">12 <div class="linkSiblingCC">2222</div></div> <div class="linkSiblingC">13 <div class="linkSiblingCC">3333</div></div> </div> </div> <div> <div class=‘link‘>2</div> <div class="linkSibling"> <div class="linkSiblingC">11 <div class="linkSiblingCC">1111</div></div> <div class="linkSiblingC">12 <div class="linkSiblingCC">1211</div></div> <div class="linkSiblingC">13 <div class="linkSiblingCC">1311</div></div> </div> </div> <div> <div class=‘link‘>3</div> <div class="linkSibling">3兄弟</div> </div> <div> <div class=‘link‘>4</div> <div class="linkSibling">4兄弟</div> </div> <div> <div class=‘link‘>5</div> <div class="linkSibling">5兄弟</div> </div> <div class="clearl">6</div> </div> </body> <script> $(‘.link‘).click(function(){ $(‘.linkSibling‘).hide(); $(this).siblings().show() $(‘.link‘).removeClass(‘color‘); $(this).addClass(‘color‘) }) $(‘.linkSiblingC‘).click(function(){ $(‘.linkSiblingCC‘).hide(); $(this).children().show() $(‘.linkSiblingC‘).removeClass(‘bak‘); $(this).addClass(‘bak‘) }) $(‘.clearl‘).click(function(){ $(‘.nav‘).hide() }) </script> </html>