javascript - 单击而不是悬停时的 Jquery

Question

我有这个 jQuery 代码可以在悬停时打开 Accordion ，但我需要让它在每个选项卡上工作，而不是单击，我试图将“悬停”更改为“单击”但没有成功，这里有人可以帮忙吗我 ？

提前致谢。

$(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);
    });
});

Tushar Gupta 的想法是唯一部分可行的想法，它会在点击时打开 Accordion ，但如果用户在一个打开的时候点击另一个选项卡，就会出现错误...

我弄乱了整个代码。

http://jsfiddle.net/C8Kp8/ <-- Tushar Gupta 的解决方案

http://jsfiddle.net/SHmuc/ <-- 原始代码

谢谢大家的帮助，非常感谢。

Answer 1

您可以使用 .toggle()或者这个

    $(function() {
    $('#accordion > li').click(function() {
        var $this = $(this);

        if ($this.hasClass('open')) {
            $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();
            $this.removeClass('open');
        }
        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);
            $this.addClass('open');
        }
    });
});