Javascript 单击Jquery而不是悬停

我有一个jQuery代码，它可以在悬停时打开一个手风琴，但是我需要让它在单击时每个选项卡都工作，我尝试将“悬停”更改为“单击”，但没有成功，这里有人可以帮助我吗

提前谢谢

$(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的想法是唯一一个部分起作用的想法，它会在单击时打开accordeon，但如果用户在打开另一个选项卡时单击另一个选项卡，则会出现错误

我把整个代码都弄乱了

您可以使用或此

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

---

看看这个@Alex的回答很好，但忽略了第一次单击，并且在单击关闭的元素时不会关闭打开的元素。在这个版本中，手风琴元素中的

更多

链接也起作用

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

         if (!$this.hasClass('open')) {
             // open clicked accordion element
             $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();

             // close other open accordion element
             $("#accordion li.open").stop().animate({'width':'115px'},1000);
             $("#accordion li.open .heading").stop(true, true).fadeIn();
             $("#accordion li.open .description, #accordion li.open .bgDescription").stop(true, true).fadeOut();
             $("#accordion li.open").removeClass("open");
             $this.addClass('open');
         }
         else {
             // close this accordion element
             $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.removeClass('open');
         }
     });

     $('#accordion > li a').click(function(e){
         e.stopPropagation();
     });
 });

---

你能创建一个JSFIDLE来更好地理解？？您使用animate的逻辑似乎在下降，您应该使用每个动画的回调或承诺，或者使用toggleYou mean toggle event对其进行动画制作：无论如何，这已从jqueryMy bad中删除，您使用toggle而不是使用fade/slide进行动画制作，抱歉，尽管这很有意义，使用此代码，滑块/手风琴将无法打开任何选项卡。请查看我的答案。我修复了它，所以“更多”链接可以工作。非常感谢您在这件事上的帮助，问题是当您单击另一个“选项卡”时，它不会关闭一开始打开的选项卡，让我们假设我单击“选项卡A”，然后当我单击“选项卡C”时，两者都保持打开。这非常有效，非常感谢您的帮助和您花费的时间来帮助我。