2016-12-10 4 views
0

Следующий код не опускается вниз и вверх DIV при нажатии, она не выполняет anything.But Im пытается точный код, который работает здесь http://jsfiddle.net/vNeXq/Dropdown Div не работает

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script> 
     $('#login').click(function(){ 
    $('#loginForm').slideToggle('fast'); 
}); 
    </script> 
</head> 
<body> 
    <div id="loginWrapper"> 
     <a id="login">Login</a> 
     <div id="loginForm"> 
      <form name="login" method="post"> 
       <input type="text" name="username" placeholder="Username" /> 
       <input type="password" /> 
       <input type="submit" value="Login" /> 
      </form> 
     </div> 
    </div> 
</body> 

CSS File

#loginWrapper 
    { 
     width:400px; 
     background-color:#F0F0F0; 
    } 
    #login 
    { 
     cursor:pointer; 
    } 
    #loginForm 
    { 
     display:none; 
    } 
+3

Включили ли вы JQuery в вашем проекте? –

+0

Я предполагаю наличие кодов между делает это –

+0

Нет, вам нужно включить jQuery, а затем включить файлы сценариев. –

ответ

1

Довольно, что вы не включили JQuery. Библиотека jQuery необходима для скрипта, который вы хотите запустить. Вы можете скачать копию jQuery с here или воспользуйтесь копией hosted from Google. jQuery должен быть включен перед кодом, который вы хотите запустить.

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
    <div id="loginWrapper"> 
     <a id="login">Login</a> 
     <div id="loginForm"> 
      <form name="login" method="post"> 
       <input type="text" name="username" placeholder="Username" /> 
       <input type="password" /> 
       <input type="submit" value="Login" /> 
      </form> 
     </div> 
    </div> 
    <!-- INCLUDE JQUERY --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 

     $(document).ready(function(){ 
     $('#login').click(function(){ 
       $('#loginForm').slideToggle('fast'); 
      }); 
     }): 

    </script> 
</body> 
</html> 
+0

Итак, похоже, что я новичок в Javascript.I не включал jQuery и $ (document) .ready (function() {} вначале. Спасибо большое. Теперь это работает –

+0

Добро пожаловать. –

0

Если вы включили JQuery в проекте может быть, вы хотите, чтобы обернуть ваш код с помощью функции, которая выполняется при загрузке страницы, так что вы уверены, что все есть:

$(document).ready(function(){ 
    $('#login').click(function(){ 
     $('#loginForm').slideToggle('fast'); 
    }); 
}) 
0

Вы можете попробовать, как:

<script> 
      $(document).ready(function(){ 
       $(document).on('click','#login',function(){ 
        $('#loginForm').slideToggle('fast'); 
       }); 
      }); 

    </script> 
-1

Кажется, что вы не включаете библиотеку jQuery в голову html-файла.

Включите библиотеку Jquery (он должен быть перед вашим сценарием):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

Для того, чтобы изменить JQuery HTML-документ, он должен ждать, пока страница не будет готова. Вы можете сделать это, поставив вашу функцию в:

$(document).ready(function() { 
    // your code here 
}); 

Так что ваш сценарий будет в конечном итоге выглядит как:

$(document).ready(function() { 
     $('#login').click(function(){ 
     $('#loginForm').slideToggle('fast'); 
     }); 
});