jquery——简单的下拉列表制作及bind，方法的示例
<!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" >
<a href="#">衬衫</a>
<ul class="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" >
<a href="#">卫衣</a>
<ul class="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" >
<a href="#">裤子</a>
<ul class="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{
"内容" 显示
}