Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Помогите сменить событие .hover на .click (https://javascript.ru/forum/jquery/13242-pomogite-smenit-sobytie-hover-na-click.html)

serdeles 22.11.2010 14:14

Помогите сменить событие .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

igrok 22.11.2010 16:50

Попробуйте так:
<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>

serdeles 22.11.2010 17:07

Спасибо. Решил проблему через 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.