Question

我有这个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/＆lt; - Tushar Gupta的解决方案

http://jsfiddle.net/SHmuc/＆lt; - 原始代码

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

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

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

单击Jquery而不是悬停

2 个答案: