最近一直没写博客、今天开个头
如图
JQuery的目的就是用让编程人员写更少的代码、实现更多的功能。
HTML代码
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>chenchenMake</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/editTable.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/editTable.js"></script>
<link href="../../css/StyleSheet1.css" rel="stylesheet" />
<script type="text/javascript" src="../../Scripts/JavaScript2.js"></script>
</head>
<body>
<ul>
<li class="main">
<a href="#">菜单项1</a>
<ul>
<li><a href="#">菜单项1</a> </li>
<li><a href="#">菜单项1</a> </li>
<li><a href="#">菜单项1</a> </li>
</ul>
</li>
<li class="main">
<a href="#">菜单项2</a>
<ul>
<li><a href="#">菜单项1</a> </li>
<li><a href="#">菜单项1</a> </li>
<li><a href="#">菜单项1</a> </li>
</ul>
</li>
<li class="main">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">菜单项1</a> </li>
<li><a href="#">菜单项1</a> </li>
<li><a href="#">菜单项1</a> </li>
</ul>
</li>
</ul>
</body>
</html>
</span>
JQ代码
<span style="font-size:18px;">$(document).ready(function () {
//页面DOM装在完成时候
$(".main > a").click(function () {
var ulNode = $(this).next("ul");
//if (ulNode.css("display") == "none") {
// ulNode.css("display", "block");
//} else {
// ulNode.css("display", "none");
//}
//ulNode.show(300);
//ulNode.hide(300);
//ulNode.toggle(300);
//ulNode.slideDown();
ulNode.slideToggle("fast");
})
})</span>
CSS代码
<span style="font-size:18px;">ul, li {
list-style:none;
}
ul {
padding:0;
margin:0;
}
.main {
background-color:#3e3e42;
background-repeat:repeat-x;
width:120px;
}
li {
background-color:#808080;
}
a {
text-decoration:none;
padding-left:20px;
display:block;
display:inline-block;
width:100px;
padding-top:3px;
padding-bottom:3px;
}
.main a {
color:white;
}
.main li a {
color:black;
}
.main ul {
display:none;
}</span>
最近过的挺飘的…………………………………………
————————————————————chenchen————————————————————————