<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级联动导航</title> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ $('.box >li > a').click(function(){ $(this).siblings("ul").show().parent('li').siblings('li').find('ul').hide(); }); $('.box >li >ul >li >a').click(function(){ $(this).siblings("ul").show().parent('li').siblings('li').find('ul').hide(); }) }) </script> <style type="text/css"> ul{ width: 100%; } ul li{ width: 100%; list-style: none; } .box > li >ul >li ul{ display: none; } .box > li >ul{ display: none; } </style> </head> <body> <ul class="box"> <li> <a href="#">1导航</a> <ul> <li> <a href="#">01导航</a> <ul> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> </ul> </li> <li> <a href="#">02导航</a> <ul> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> </ul> </li> <li> <a href="#">03导航</a> <ul> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> </ul> </li> </ul> </li> <li> <a href="#">2导航</a> <ul> <li> <a href="#">01导航</a> <ul> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> </ul> </li> <li> <a href="#">02导航</a> <ul> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> </ul> </li> <li> <a href="#">03导航</a> <ul> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> </ul> </li> </ul> </li> <li> <a href="#">3导航</a> <ul> <li> <a href="#">01导航</a> <ul> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> </ul> </li> <li> <a href="#">02导航</a> <ul> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> </ul> </li> <li> <a href="#">03导航</a> <ul> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> </ul> </li> </ul> </li> </ul> </body> </html>