Jquery 滑动切换几乎没有扩展_Jquery_Slidetoggle

Jquery 滑动切换几乎没有扩展

jquery

Jquery 滑动切换几乎没有扩展,jquery,slidetoggle,Jquery,Slidetoggle,因此，我试图有一个div幻灯片切换时，点击这个链接。当切换时，滑动切换的div应该向下推div的下方。但当我切换它时，它似乎只是在下面的div后面滑动或滑动。Idk为什么这样做以下是索引： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

因此，我试图有一个div幻灯片切换时，点击这个链接。当切换时，滑动切换的div应该向下推div的下方。但当我切换它时，它似乎只是在下面的div后面滑动或滑动。Idk为什么这样做

以下是索引：

<!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>

我在这里测试过，效果很好

我想你的问题是你需要e；在联系人和href=上，而不仅仅是href=

此外，请尝试使用最新的jQuery 1.7，因为它确实可以在那里工作。什么是，我会把e放在哪里；我的上帝。。。。在href中的简单工作！非常感谢。但请继续解释e；e、防止违约；将取消单击并阻止页面刷新或转到href，我认为这是正在发生的事情。这就像什么都不做。您可以使用e.preventDefault；或者放在href。。。或者两者都有

@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;
}