简单的下拉菜单、左部导航使用。
2016-5-13 记
效果图如下：
<!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>
需导入jQuery的js文件