- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script src1="jquery-1.8.1.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $(".season").hide();//先将所有的季度数目隐藏起来
- $(".name>a").click(function(){//点击触发
- $(this).addClass("whatever")//添加一个点击选中的样式,这里的样式可以由你自己随意编写,所以这里用了whatever
- .next().slideToggle()//所有的li元素由显示变成隐藏,或者由隐藏变成显示;
- .parent().siblings().children("a").removeClass("whatever")//隐藏掉之前被点击选中的ul
- .next().slideUp();//对应ul的li也向上收回;
- return false;});
- });
- </script>
- <title>Jquery_text</title>
- </head>
- <body>
- <div class="myTv">
- <ul class="menu">
- <li class="name">
- <a href="#none">生活大爆炸</a>
- <ul class="season">
- <li><a href="#none">第一季</a></li>
- <li><a href="#none">第二季</a></li>
- <li><a href="#none">第三季</a></li>
- <li><a href="#none">第四季</a></li>
- <li><a href="#none">第五季</a></li>
- <li><a href="#none">第六季</a></li>
- </ul>
- </li>
- <li class="name">
- <a href="#none">绯闻女孩</a>
- <ul class="season">
- <li><a href="#none">第一季</a></li>
- <li><a href="#none">第二季</a></li>
- <li><a href="#none">第三季</a></li>
- <li><a href="#none">第四季</a></li>
- </ul>
- </li>
- <li class="name">
- <a href="#none">吸血鬼日记</a>
- <ul class="season">
- <li><a href="#none">第一季</a></li>
- <li><a href="#none">第二季</a></li>
- <li><a href="#none">第三季</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/120820135082.html
来源: http://www.codesnippet.cn/detail/120820135082.html