jquery событие toggle
Здравствуйте. Помогите, пожалуйста, разобраться.
Есть надпись. Один раз на нее нажимаешь - пропадает форма, название надписи меняется. Второй раз на нее нажимаешь - форма появляется, название надписи меняется на первоначальное. По урокам так и должно работать. Я только начинаю изучать jquery. Но в итоге сама надпись скрывается. Что не так?Код прилагаю. <!--<div id="formHide">Свернуть форму</div>--> $(document).ready(function() { $("#formHide").toggle( function() { $('#my_form').fadeOut(5000); $(this).text('Развернуть форму'); }, function() { $('#my_form').fadeIn(1000); $(this).text('Свернуть форму'); } }); //конец ready |
Не используйте toggle в таком варианте, начиная с версии 1.9 такая поддержка метода удалена.
|
|
Большое спасибо
|
А чем заменить тогда toggle, чтобы он работал как переключатель? В моем коде? Подскажите, пожалуйста.
|
Цитата:
|
Цитата:
|
рони, лучше toggleClass() и остальное CSS. )
|
Цитата:
$.fn.mytoggle = function() { 14 var b = arguments; 15 return this.each(function(i, el) { 16 var a = function() { 17 var c = 0; 18 return function() { 19 b[c++ % b.length].apply(el, arguments) 20 } 21 }(); 22 $(el).click(a) 23 }) 24 }; |
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$.fn.mytoggle = function() {
var b = arguments;
return this.each(function(i, el) {
var a = function() {
var c = 0;
return function() {
b[c++ % b.length].apply(el, arguments)
}
}();
$(el).click(a)
})
};
$(function() {
$("#formHide").mytoggle(
function() {
$('#my_form').stop().fadeOut(5000);
$(this).text('Развернуть форму');
},
function() {
$('#my_form').stop().fadeIn(1000);
$(this).text('Свернуть форму');
})
});
</script>
</head>
<body>
<div id="formHide">Свернуть форму</div>
<!-- Form starts -->
<form name="feedback_form" id="my_form">
<fieldset>
<legend>Contact Form</legend>
<table width="100%" border="0">
<tr>
<td width="120"><label for="name">Name</label></td>
<td><input name="name" id="name" size="30" /></td>
</tr>
<tr>
<td width="120"><label for="email">E-mail</label></td>
<td><input name="email" id="email" size="30" /></td>
</tr>
<tr>
<td width="120" valign="top"><label for="comments">Comments</label></td>
<td><textarea name="comments" id="comments" rows="5" cols="40"></textarea></td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" name="Submit" value="Submit" />
</td>
</tr>
</table>
</fieldset>
</form>
<!-- Form ends -->
</body>
</html>
|
| Часовой пояс GMT +3, время: 19:17. |