1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"/> 5 <meta name="viewport" content="width=device-width"/> 6 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 7 <script src="underscore.js"></script> 8 9 </head> 10 <body> 11 <!-- ace-template demo--> 12 <script id="t2" type="text/template"> 13 <% _.each(datas, function(item) {%> 14 <div class="outer"> 15 <div class="title"> 16 <span><%= item.film%></span> 17 </div> 18 <ul class="ul"> 19 <% _.each(datas, function(item) {%> 20 <li> 21 <a href="<%= item.url %>">【<%= item.title%>】</a> 22 </li> 23 <%});%> 24 </ul> 25 </div> 26 <%});%> 27 </script> 28 29 <!-- data --> 30 <script> 31 var datas = [{ 32 title: "1942", 33 url: "http://www.baidu.com", 34 film: "film1" 35 },{ 36 title: "少年派的漂流", 37 url: "http://www.baidu.com", 38 film:"电影2" 39 },{ 40 title: "教父", 41 url: "http://www.baidu.com", 42 film: "电影3" 43 }, 44 { 45 title: "肖申克的救赎", 46 url: "http://www.baidu.com", 47 film: "电影4" 48 }, 49 { 50 title: "3d2012", 51 url: "http://www.baidu.com", 52 film:"电影5" 53 }]; 54 55 $("body").html(_.template($("#t2").html(), datas)); 56 </script> 57 58 <script type="text/javascript"> 59 $(".ul").hide(); 60 61 $(".ul>li:last-child").addClass("last-li"); 62 63 $("body>div:first-child>ul").show(); 64 65 $(".title").click(function() { 66 $(this).siblings().toggle(); 67 $(this).parent().siblings().children(".bbs-nav-ul").hide(); 68 }); 69 70 $(".title").hover(function() { 71 $(this).toggleClass("hover"); 72 }); 73 74 $(".ul>li").hover(function() { 75 $(this).toggleClass("hover"); 76 }); 77 </script> 78 </body> 79 </html>