<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>下拉列表</title><style type="text/css">*{margin: 0;padding: 0;}.wrap{margin-left: 100px;margin-top: 50px;width: 120px;}.caktye_list{border: 1px solid #eee;}.caktye_list li{list-style: none;}.caktye_list li a{width: 120px;display: block;height: 32px;line-height: 32px;text-decoration: none;color: #333;/*text-align: center;*/border-top: 1px solid #eee;}.caktye_list li:first-child a{border-top: none;}.cak{display: none;}.cak li a{width: 120px;border-top: 1px solid #FFF;background-color: #FDECF9;}.cak li a:hover{background-color: #eee;}.cak li:first-child a{border-top: none;}</style></head><body><div class="wrap"><ul class="caktye_list"><li><a href="###">JavaScript</a><ul class="cak"><li><a href="###">语法</a></li><li><a href="###">语句</a></li><li><a href="###">函数</a></li></ul></li><li><a href="###">Jquery</a><ul class="cak"><li><a href="###">语法</a></li><li><a href="###">语句</a></li><li><a href="###">函数</a></li></ul></li><li><a href="###">Angular</a><ul class="cak"><li><a href="###">语法</a></li><li><a href="###">语句</a></li><li><a href="###">函数</a></li></ul></li></ul></div><script type="text/javascript" src="jquery-1.11.3.min.js"></script><script type="text/javascript">$(function(){$(".caktye_list li a").click(function(){$(this).siblings("ul").slideToggle("fast");$(this).siblings("ul").children("ul").slideUp("fast");if($(this).siblings("ul").css("display")== "block"){$(this).parents("li").siblings('li').children('ul').slideUp("fast");}})})</script></body></html>
