<!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>
jquery 实现简单的手风琴效果
原文地址：https://www.cnblogs.com/lcf1314/p/9213152.html