Каков наилучший способ скольжения раздела HTML с использованием JavaScript?

Question

У меня есть скрытый раздел в моем HTML-шаблоне (я использую шаблоны Django), скрытый раздел - это форма входа в систему, я хочу, чтобы когда пользователь нажимал какой-либо текст для входа (ссылка), HTML-текст, скрывающий форму, должен скользить вниз, показывая форма.

У меня такое чувство, что это можно сделать в Javascript!

Я использую django, пожалуйста, подробно опишите, как включить javascript в мой проект.

Помощь

Гаф

Answer 1

продолжить ответ Тревиса;

<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

Если вы используете 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

});

Конечно, это только отправная точка, так как в идеале вы хотели бы иметь возможность перемещать ее вверх и вниз при каждом последовательном щелчке.

Answer 3

Я не использую 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>