使用 javascript 滑動 html 的最佳方式是什么？

Question

我的 Html 模板中有一個隱藏部分（我正在使用 Django 模板），隱藏部分是一個登錄表單，我希望當用戶單擊一些登錄文本（鏈接）時，ZFC35FDC70D5FC69D269883A822C7 顯示文本表單應該向下滑動。

我覺得這可以用 Javascript 完成！

我正在使用 django，請逐步詳細說明如何在我的項目中包含 javascript。

幫助

加思

Answer 1

繼續 Travis 的回應；

<script type="text/javascript">
  $(document).ready(function() {
    $("#toggleForm").click(function () {
      $("#loginForm").slideToggle("slow");
    });
  });
  </script>
<div id='toggleForm'>Show Login</div>
<div id='loginForm'>
 Your form goes here!
<div>

即 slideToggle() 是你的朋友。

Answer 2

我不使用 Django，但我可以告訴你JQuery將完全滿足你的要求。 您將需要包含 JQuery 庫，然后使用 slideDown() 和 slideUp() 函數來顯示您的表單。

這是您所追求的粗略示例。 查看JQuery 文檔了解更多信息

<script>
    $("#toggleForm").click(function () {
      if ($("#loginForm").is(":hidden")) {
        $("#loginForm").slideDown("slow");
      } else {
        $("#loginForm").slideUp("slow");
      }
    });
</script>

<div id='toggleForm'>Show Login</div>
<div id='loginForm'>
 Your form goes here!
<div>

Answer 3

如果您使用的是jQuery ，這樣的事情應該可以解決問題

$('.login-link').bind('click', function(e) { // bind event handler to click of login link

    $('#login-panel').slideDown(); // slide down the panel
    e.preventDefault(); // stop the link taking you to the js disabled login page

});

當然，這只是一個起點，因為理想情況下，您希望能夠在每次連續單擊時上下滑動它。