JQuery на клик вместо зависания

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 Гупта является единственной, что это частично работает, он открывает аккордеон на щелчке, но если пользователь нажимает на другую вкладку в то время как один открыт есть ошибка ...

я сделать скрипка со всем кодом.

http://jsfiddle.net/C8Kp8/ < - решение Tushar Гупты

< http://jsfiddle.net/SHmuc/ - Оригинальный код

поблагодарить всех вас за вашу помощь, его действительно ценят.

Answer 1

Посмотрите на это. @ Ответ Алекс хорош, но игнорирует первый щелчок и не закрывает открытые элементы при нажатии закрытого элемента. 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(); 
    }); 
}); 

Answer 2

Вы можете использовать .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'); 
     } 
    }); 
});