Question

所以我在点击此链接时尝试使用div slideToggle。而且，当它切换时，slideToggled 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>

这是样式表

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

Answer 1

我在这里测试了http://jsfiddle.net/yVNBM/，这对我来说非常好。

我认为你的问题是你需要e.preventDefault（）;在联系人和href =“＃”而不是只是href =“”

另外，请尝试使用最新的jQuery（1.7）

slideToggle刚刚扩展

1 个答案: