2016-05-31 11 views
0

ログイン画面のスライドダウンメニューを作成する必要があります。 これは私が持っているコードですが、それは動作しません。Jquery slide login menu does not work

のjQuery:

$('document').ready(function() 
{ 
    $('#login').click(function() 
    { 
     $('form').slideDown(); 
    }); 
}); 

HTML:ディスプレイを追加し、そのために

:フォームを開く必要があり#openのクリックで

<div id="login"> 
<p id="open">Login</p> 
<form> 
    <p> 
     <label for="username">Username:</label> 
     <input type="text" name="username" id="username"> 
    </p> 
    <p> 
     <label for="password">Password: </label> 
     <input type="text" name="password" id="password"> 
    </p> 
    <p> 
     <input type="submit" name="button" id="button" value="Submit" > 
    </p> 
</form> 
</div> 

答えて

3

形でなし最初

#openのクリックイベントを作成し、そのイベントをフォームに切り替えます:

HTML:

<div id="login"> 
    <p id="open">Login</p> 
    <form style="display:none;"> 
     <p> 
      <label for="username">Username:</label> 
      <input type="text" name="username" id="username"> 
     </p> 
     <p> 
      <label for="password">Password: </label> 
      <input type="text" name="password" id="password"> 
     </p> 
     <p> 
      <input type="submit" name="button" id="button" value="Submit" > 
     </p> 
    </form> 
</div> 

jqueryの

$(document).ready(function() { 
    $('#open').click(function() 
    { 
     $('form').slideDown(); 
    }); 
});