0
所以我试图有一个div slideToggle当这个链接被点击。当切换时,slideToggled div“应该”压下它下面的div。但它似乎只是几乎没有滑动或滑动后面的divs时,我切换它。 Idk为什么这样做。slideToggle只是几乎没有扩大
这里是指数:
<!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" />
<title>Johnny Edick's Portfolio</title>
<link rel=StyleSheet href="styles.css" type="text/css" >
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#nav a.expand").click(function() {
$('#contactForm').slideToggle('900');
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/logo/nameBlue.png" title="name"/>
<div id="nav">
<ul>
<li><a href="">about</a></li>
<li><a href="">work</a></li>
<li><a href="" class="expand">contact</a></li>
</ul>
</div>
<div id="logo">
<img src="images/logo/logoCalligraphy.png" />
</div>
</div>
<div id="contactForm">contact</div>
<div id="content" class="topImage">
<div id="tagLine" class="roundedCorners">
<img src="images/tagLine.png" />
</div>
</div>
<div id="recentWork"></div>
</div>
</body>
</html>
这里是样式表
@charset "utf-8";
/* CSS Document */
body {
background-color: #e4e4e4;
/*background-image:url(../../Pictures/paperTextures/bg-pixelated-lightgray.jpg);*/
font: 16px/26px Georgia, "Times New Roman", Times, serif;
margin:0;
padding:0;
}
.roundedCorners{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}
#wrapper {
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
position:relative;
top:0;
}
#header {
width:800px;
float:left;
margin-bottom:5px;
/* background-color: #685c58; */
}
img[title="name"]{
padding-top: 50px;
float: left;
}
#logo {
float: right;
position:relative;
top:0;
right:0;
}
#nav {
width: auto;
float: left;
margin-top: 60px;
margin-left: 50px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
width: 350px;
}
ul li{
float: left;
}
ul a {
display:block;
padding: 0 2em;
text-decoration: none;
color:#000;
}
.topImage{
background: url(images/top.png) no-repeat left top;
}
#contactForm {
background: blue;
width: 800px;
height:600px;
float:left;
display:none;
overflow:visible;
}
.expand{}
#content {
width: 780px;
float: left;
padding-top: 20px;
padding-left: 20px;
padding-left: 20px;
background-color: #fff;
}
#tagLine {
width: 760px;
height: 250px;
float: left;
background: #97a3a7;
}
#recentWork {
width: 800px;
background-color:#ffffff;
float: left;
height: 300px;
}
#logo {
margin-top: 0px;
}
怪异它在那里工作。什么是和哪里会把e.preventDefault(); – johnnE 2012-03-29 02:55:57
我的天啊....简单的#在href工作!谢谢。但请继续解释e.preventDefault(); – johnnE 2012-03-29 02:57:39
e.preventDefault();将取消点击并阻止页面刷新(或进入href),这正是我所想的。这就像“无所事事”。你可以使用e.preventDefault();或者把#放在href中(或者两者都有) – Miro 2012-03-29 04:01:57