单击Jquery而不是悬停

Jquery on click instead of hover

本文关键字：悬停 Jquery 单击      更新时间：2023-09-26

我有一个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/<--Tushar Gupta的解决方案

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

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

您可以使用.thoggle（）或这个

    $(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的回答很好，但忽略了第一次单击，并且在单击关闭的元素时不会关闭打开的元素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();
     });
 });
相关文章：