<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery练习1</title> <style> *{ list-style: none; text-decoration: none; padding: 0; margin: 0 auto; } .level1{ width:100px; height:auto; line-height:35px; background-color:pink; border-bottom:1px solid #999; } .level2 li{ text-align:center; width:100px; height:35px; line-height:35px; background-color:#ccc; border-bottom:1px solid #999; } .level1:hover{ background-color:yellow; } .level2 li:hover{ background-color:yellow; } .level2{ display:none; } .current{ color:red; } </style> <script type="text/javascript" src="jquery-3.1.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".level1>a").bind("click",function(){ if($(this).next().is(":visible")){ $(this) .addClass("current") .next() .hide() .parent() .siblings() .children("a") .removeClass("current") .next() .hide(); return false; }else{ $(this) .addClass("current") .next() .show() .parent() .siblings() .children("a") .removeClass("current") .next() .hide(); return false; } }) }) </script> </head> <body> <div class="box"> <ul class="menu"> <li class="level1" id="level1"> <a href="#">衬衫</a> <ul class="level2" id="level2"> <li><a href="#">短袖衬衫</a></li> <li><a href="#">长袖衬衫</a></li> <li><a href="#">短袖T恤</a></li> <li><a href="#">长袖T恤</a></li> </ul> </li> <li class="level1" id="level1"> <a href="#">卫衣</a> <ul class="level2" id="level2"> <li><a href="#">开衫卫衣</a></li> <li><a href="#">套头卫衣</a></li> <li><a href="#">运动卫衣</a></li> <li><a href="#">童装卫衣</a></li> </ul> </li> <li class="level1" id="level1"> <a href="#">裤子</a> <ul class="level2" id="level2"> <li><a href="#">短裤</a></li> <li><a href="#">休闲裤</a></li> <li><a href="#">牛仔裤</a></li> <li><a href="#">免烫卡其裤</a></li> </ul> </li> </ul> </div> </body> </html>
【事件绑定】在文档加载完后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定，bind()方法的调用格式为：bind(type,data,fn);
参数说明：
第一个参数是事件类型；第二个参数可选，作为event.data属性值传递给事件对象的额外数据对象；第三个则是用来绑定的处理函数。
在上面的例子中实现了单击标题显示“内容”，在单击，隐藏“内容”，再次单击有显示“内容”的两个循环动作，为了实现这个功能，需要经过以下几个步骤：
（1）等待DOM装载完毕；
（2）找到“标题”所在的元素，绑定click事件；
（3）找到“内容”元素，如果“内容”元素是显示的，则隐藏；反之亦然。
原理如下：
if("内容" 显示){ "内容" 隐藏 }else{ "内容" 显示 }