最近学了jQuery,感觉这个jQuery是真的挺不错的，果然像他说的那样，少些多做！刚一入手感觉真是不错。但是写多了，就会发现这个代码一行居然能写那么长。而且可读性还不好。 有幸自己买了一本锋利的jQuery这本书。我就整理了下。到底在实际应用中怎么让自己的jQurey的代码看起来可读性强，而且还有美感。 我就用了了本书中的一个小例子。来教教大家代码应该怎么写菜好看！
废话不多说，想把这个demo代码奉上。各位爷！您瞧好啊~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单栏</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 280px;
background-color: red;
margin: 50px auto;
border: 1px solid #000;
}
.box .menu{
width: 100%;
height: 100%;
background-color: gold;
list-style: none;
}
.box .menu>.level1{
width: 100%;
height: auto;
line-height: 40px;
list-style: none;
}
.box .menu>.level1>a.current{
background-color: green;
color: #0a0a0a;
text-decoration: none;
}
.box .menu>.level1>a{
display: inline-block;
background-color: gray;
width: 100%;
text-align: center;
text-decoration: none;
}
.box .menu>.level1>.level2{
width: 100%;
height: 160px;
background-color: white;
display: none;
float: left;
}
.box .menu>.level1:nth-of-type(1)>.level2{
display: block;
}
.box .menu>.level1>.level2 li{
width: 100%;
height: 40px;
list-style: none;
background-color: gainsboro;
text-align: center;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function () { $(".level1>a").click(function () {
$(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="#one" class="current">衬衫</a>
<ul class="level2">
<li>短袖衬衫</li>
<li>长袖衬衫</li>
<li>短袖衬衫</li>
<li>短袖衬衫</li>
</ul>
</li>
<li class="level1">
<a href="#one">卫衣</a>
<ul class="level2">
<li>开襟卫衣</li>
<li>开襟卫衣</li>
<li>开襟卫衣</li>
<li>开襟卫衣</li>
