0
このリンクをクリックすると、div slideToggleを作成しようとしています。また、slideToggled divは、切り替えるときにdivの下にあるdivを押し下げるべきです。しかし、それは私がそれを切り替えると、下のdivの後ろにわずかにスライドするかスライドするように思えます。 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>
そして、ここでは、私がここにhttp://jsfiddle.net/yVNBM/それをテストし、それは私にはかなり良い作品スタイルシート
@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;
}
奇妙な最新のjQueryを使用してみてください。何がどこにあり、e.preventDefault（）; – johnnE
私の神.... hrefのシンプルな＃が働いた！ありがとうございました。 e.preventDefault（）;を説明してください。 – johnnE
e.preventDefault（）;クリックをキャンセルし、ページがリフレッシュされるのを防ぎます（またはhrefに行く）。これは私が起こっていると思います。それは "何もしない"のようなものです。 e.preventDefault（）を使用することもできます。またはhrefに＃を入れてください...（またはその両方） – Miro