slideToggle nur kaum erweitert

So versuche ich eine div sliderToggle, wenn dieser Link angeklickt wird. Und das slideToggled div "sollte" die Divs nach unten drücken, wenn es umschaltet. Aber es scheint nur kaum zu gleiten oder hinter die Divs zu rutschen, wenn ich es umschalte. Idk warum es das macht. HierslideToggle nur kaum erweitert

ist der Index:

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

Und hier ist das Stylesheet

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

Quelle

2012-03-29 johnnE

ich es hier getestet http://jsfiddle.net/yVNBM/ und es funktioniert ziemlich gut zu mir.

Ich glaube, das Problem war, dass Sie e.preventDefault() benötigen; auf den Kontakt und href = "#" statt nur href = ""

Versuchen Sie auch, die neueste jQuery (1.7)

Quelle

2012-03-29 02:46:15 Miro

seltsam es mit ihm funktioniert. was ist und wo willie setzen e.preventDefault(); – johnnE

Mein Gott .... die einfache # in der href hat funktioniert! Vielen Dank. aber bitte erkläre die e.preventDefault(); – johnnE

e.preventDefault(); wird den Klick abbrechen und verhindern, dass die Seite aktualisiert wird (oder zum href geht), was meiner Meinung nach passiert. Es ist wie "Tue nichts". Sie können entweder e.preventDefault(); oder setze # in die href ... (oder beides) – Miro

slideToggle nur kaum erweitert

Antwort

Verwandte Themen