簡單的jQuery的slideToggle無法在任何瀏覽器中工作

我有一個簡單的jQuery代碼，用於在我的網站上向下滑動面板。我在頭文件中包含了jquery.js文件。但它仍然不起作用。它與版本有關嗎？簡單的jQuery的slideToggle無法在任何瀏覽器中工作

的HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Slide Panel</title> 
     <script type="text/javascript" src="script.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="style.css"></link> 
    </head> 

    <body> 
     <div class="panel"> 
      <br /> 
      <br /> 
      <p>Panel</p> 
     </div> 

     <p class="slide"> 
      <div class="pull-me"> 
       Slide Up/Down 
      </div> 
     </p> 
    </body> 
</html>

的CSS：

body { 
    margin:0 auto; 
    padding:0; 
    width:200px; 
    text-align:center; 
} 
.pull-me{ 
    -webkit-box-shadow: 0 0 8px #FFD700; 
    -moz-box-shadow: 0 0 8px #FFD700; 
    box-shadow: 0 0 8px #FFD700; 
    cursor:pointer; 
} 
.panel { 
    background: #ffffbd; 
    background-size:90% 90%; 
    height:300px; 
    display:none; 
    font-family:garamond,times-new-roman,serif; 
} 
.panel p{ 
    text-align:center; 
} 
.slide { 
    margin:0; 
    padding:0; 
    border-top:solid 2px #cc0000; 
} 
.pull-me { 
    display:block; 
    position:relative; 
    right:-25px; 
    width:150px; 
    height:20px; 
    font-family:arial,sans-serif; 
    font-size:14px; 
    color:#ffffff; 
    background:#cc0000; 
    text-decoration:none; 
    -moz-border-bottom-left-radius:5px; 
    -moz-border-bottom-right-radius:5px; 
    border-bottom-left-radius:5px; 
    border-bottom-right-radius:5px; 
} 
.pull-me p { 
    text-align:center; 
}

而jQuery的：

$(document).ready(function(){ 
    $('.pull-me').click(function(){ 
     $('.panel').slideToggle('slow'); 
    }); 
});

提前感謝！ :)

來源

2013-11-23 user3024879

在小提琴中工作正常：http://jsfiddle.net/Y5uMq//檢查您的控制檯在您的代碼中的其他地方的錯誤。 –

是的，我認爲它會工作，但是當我在Chrome中打開它的面板只是不下滑:( – user3024879

這對我來說沒關係...... – FBHY

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>Slide Panel</title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> <!-- Always first call the jQuery library --> 
    <script src="script.js"></script> <!-- Then call your custom scripts --> 

    <link rel="stylesheet" href="style.css"> <!-- Link tag is selfclosing don't put </link> at the end --> 
    </head> 

    <body> 
    <div class="panel"> 
     <br /> 
     <br /> 
     <p>Panel</p> 
    </div> 

    <p class="slide"> 
     <div class="pull-me"> 
      Slide Up/Down 
     </div> 
    </p> 
    </body> 
</html>

來源

2013-11-23 13:34:25 mdesdev

非常感謝！它現在正常工作！:) – user3024879

不客氣，只記得總是先調用jQuery，jQuery UI然後自定義腳本，如果你直接在你的HTML中包含自定義腳本，總是把它們放在''標籤之間，當然在''標籤之間，並且對於jQuery中每個腳本的文檔準備好函數''（function（） {//你的腳本在這裏}）;' – mdesdev

簡單的jQuery的slideToggle無法在任何瀏覽器中工作

回答

相關問題