<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="./js/jquery.min.js"></script> <style> body,html,ul,li,h3{ margin: 0; padding: 0; } ul,li{ list-style: none; } li{ line-height: 50px; width: 200px; text-align: center; background-color: aqua; cursor: pointer; } li ul{ display: none; } li ul li { background-color: #caff95; } </style> </head> <body> <ul> <li class="parent_list"> <h3>导航1</h3> <ul> <li>导航1</li> <li>导航1</li> <li>导航1</li> </ul> </li> <li class="parent_list"> <h3>导航1</h3> <ul> <li>导航1</li> <li>导航1</li> <li>导航1</li> </ul> </li> <li class="parent_list"> <h3>导航1</h3> <ul> <li>导航1</li> <li>导航1</li> <li>导航1</li> </ul> </li> <li class="parent_list"> <h3>导航1</h3> <ul> <li>导航1</li> <li>导航1</li> <li>导航1</li> </ul> </li> </ul> <script> $(function () { $(document).on("click", ‘.parent_list‘, function () { $(this).children(‘ul‘).slideToggle(); $(this).siblings(‘li‘).children(‘ul‘).slideUp(); }) }) </script> </body> </html>
原文地址:https://www.cnblogs.com/lcf1314/p/9213152.html
时间: 2024-11-05 21:49:43