Следующий код не выпадает и не поднимает div при нажатии. Он ничего не выполняет. Но я пробую точный код, который работает здесь http://jsfiddle.net/vNeXq/

<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-файл

    #loginWrapper
    {
        width:400px;
        background-color:#F0F0F0;
    }
    #login 
    {
        cursor:pointer;
    }
    #loginForm 
    {
        display:none;
    }
0
Koray Ballı 10 Дек 2016 в 21:26

4 ответа

Лучший ответ

Уверен, что вы не включили jQuery. Библиотека jQuery необходима для скрипта, который вы хотите запустить. Вы можете скачать копию jQuery с здесь или использовать копию , размещенный в 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>
1
Brian Moreno 10 Дек 2016 в 18:42

Кажется, вы не включили библиотеку 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');
      });
});
0
Vel 21 Янв 2020 в 12:45

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

$(document).ready(function(){
   $('#login').click(function(){
        $('#loginForm').slideToggle('fast');
    });
})
0
Martin Cup 10 Дек 2016 в 18:30

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

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

    </script>
0
Vel 10 Дек 2016 в 18:33