Jquery点击而不是悬停答案

【问题标题】：Jquery on click instead of hoverJquery点击而不是悬停
【发布时间】：2013-11-20 11:24:57
【问题描述】：

我有这个 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 的想法是唯一一个部分工作的想法，它会在点击时打开手风琴，但如果用户在另一个标签打开时点击另一个标签，则会出现错误...

我修改了整个代码。

http://jsfiddle.net/C8Kp8/

http://jsfiddle.net/SHmuc/

谢谢大家的帮助，真的很感激。

【问题讨论】：

你可以创建一个 jsfiddle 以便更好地理解... ??
您使用动画的逻辑似乎下降了，您应该使用每个动画或承诺的回调或使用切换动画它

标签： javascript jquery

【解决方案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');
        }
    });
});

【讨论】：

您的意思是切换事件：api.jquery.com/toggle-event 无论如何，这已从 jquery 中删除
我的错，你使用切换而不是使用淡入淡出/滑动制作动画，抱歉
虽然这很有意义，但使用此代码，滑块/手风琴不会打开任何选项卡。
请看我的回答。我修复了它，以便“更多”链接起作用。
非常感谢您在这件事上的帮助，问题是当您单击另一个“选项卡”时，它不会关闭首先打开的那个，假设我单击“选项卡 A”然后当我点击“标签 C”时，两者都保持打开状态。

【解决方案2】：

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

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

【讨论】：

这非常有效，非常感谢您的帮助以及您花时间帮助我。