Простой 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

Все в порядке с Chrome для меня ... – 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 не работает ни в одном браузере

ответ

Смежные вопросы