Помогите сменить событие .hover на .click
Есть код аккордеона. Работает при событии .hover. Но мне надо, чтобы работал по клику. Клик — открылось, ещё раз клик — закрылось.
Исходный код: <script type="text/javascript"> $(function() { $('#accordion > li').hover( function () { var $this = $(this); $this.stop().animate({'width':'480px'},500); $('.heading',$this).stop(true,true).fadeOut(); $('.bgDescription',$this).stop(true,true).slideDown(500); $('.description',$this).stop(true,true).fadeIn(); }, function () { var $this = $(this); $this.stop().animate({'width':'115px'},1000); $('.heading',$this).stop(true,true).fadeIn(); $('.description',$this).stop(true,true).fadeOut(500); $('.bgDescription',$this).stop(true,true).slideUp(700); } ); }); </script> Я пытался прописать событие .click, но оно работает только на открытие. Второй клик не работает, и, как результат, аккордеон не закрывается: <script type="text/javascript"> $(function() { $('#accordion > li').click( function () { var $this = $(this); $this.stop().animate({'width':'480px'},500); $('.heading',$this).stop(true,true).fadeOut(); $('.bgDescription',$this).stop(true,true).slideDown(500); $('.description',$this).stop(true,true).fadeIn(); }, function () { $('#accordion > li').click( function(){ var $this = $(this); $this.stop().animate({'width':'115px'},1000); $('.heading',$this).stop(true,true).fadeIn(); $('.description',$this).stop(true,true).fadeOut(500); $('.bgDescription',$this).stop(true,true).slideUp(700); }); } ); }); </script> Помогите добавить второй клик, пожалуйста. Ссылка на исходник (на всякий случай): http://tympanus.net/Tutorials/Elegan...tAccordion.zip |
Попробуйте так:
<script type="text/javascript"> $(function() { $('#accordion > li').click( function () { var $this = $(this); if($this.css("width")=="115px"){ $this.stop().animate({'width':'480px'},500); $('.heading',$this).stop(true,true).fadeOut(); $('.bgDescription',$this).stop(true,true).slideDown(500); $('.description',$this).stop(true,true).fadeIn(); }else{ $this.stop().animate({'width':'115px'},1000); $('.heading',$this).stop(true,true).fadeIn(); $('.description',$this).stop(true,true).fadeOut(500); $('.bgDescription',$this).stop(true,true).slideUp(700); } } ); }); </script> |
Спасибо. Решил проблему через toggle:
<script type="text/javascript"> $(function() { $('#accordion > li').toggle( function () { var $this = $(this); $this.stop().animate({'width':'480px'},500); $('.heading',$this).stop(true,true).fadeOut(); $('.bgDescription',$this).stop(true,true).slideDown(500); $('.description',$this).stop(true,true).fadeIn(); }, function () { var $this = $(this); $this.stop().animate({'width':'115px'},1000); $('.heading',$this).stop(true,true).fadeIn(); $('.description',$this).stop(true,true).fadeOut(500); $('.bgDescription',$this).stop(true,true).slideUp(700); } ); }); </script> |
Часовой пояс GMT +3, время: 17:02. |