jQuery菜单动画问题

Question

我希望你能帮我解决我的问题。 你可以看一下菜单的当前工作的 www.darshakspadia.com/demo/jQuery-Issue/index.html

我的问题是，我想这个菜单

1. 公开赛上点击&不上徘徊。
2. 当我点击其他导航按钮时关闭活动关闭。

这里是jQuery的我使用这种效果

$(document).ready(function(){ 

    //Remove outline from links 
    $(".home-nav a").click(function(){ 
     $(this).blur(); 
    }); 

    //When mouse rolls over 
    $(".home-nav li").mouseover(function(){ 
     $(this).stop().animate({height:'260px'},{queue:false, duration:800, easing: 'easeOutBounce'}) 
    }); 

    //When mouse is removed 
    $(".home-nav li").mouseout(function(){ 
     $(this).stop().animate({height:'80px'},{queue:false, duration:800, easing: 'easeOutBounce'}) 
    }); 

}); 

如果我改变“.mouseover”到“点击”问题比它出现的点击，但只要我悬停在当前框中消失。

而且，如果我将“.mouseover”&“.mouseout”更改为.click什么都不会发生。

我的主要问题是我需要这样的效果。

请有人帮忙，因为这对我来说真的很紧急。

如果你想，我甚至可以共享使用，这样就可以帮助我所需要的文件..

Answer 1

你可以试试这个，删除您的鼠标悬停及移出。

$(".home-nav li").click(function(){ 
    $(this).stop().animate({height:'260px'},{queue:false, duration:800, easing: 'easeOutBounce'}); 
    $(this).siblings().stop().animate({height:'80px'},{queue:false, duration:800, easing: 'easeOutBounce'}); 
}); 

Answer 2

您需要使用click事件而不是mouseover和out。在点击功能中，您需要关闭所有其他功能并打开点击功能。

$(document).ready(function(){ 

    //Remove outline from links 
    $(".home-nav a").click(function(){ 
     $(this).blur(); 
    }); 

    $(".home-nav li").click(function(){ 
     //Close all others 
     $(".home-nav li").stop().animate({height:'80px'},{queue:false, duration:800, easing: 'easeOutBounce'}); 
     //Open this one 
     $(this).stop().animate({height:'260px'},{queue:false, duration:800, easing: 'easeOutBounce'}) 
    }); 

}); 

Answer 3

可以使用bind()多个事件方法，并与一些CSS技巧来保持高度还是：

CSS

.active { height:260px !important; } // to hold steady 

的jQuery：

$(".home-nav li").bind({ 

    click: function(){ 
     $(".home-nav li").stop().animate({height:'80px'},{queue:false, duration:800, easing: 'easeOutBounce'}); 
     $(this).stop().animate({height:'260px'},{queue:false, duration:800, easing: 'easeOutBounce'}, 
     function(){//when animation complete 
      $(".home-nav li").removeClass('active');//to remove class from all 
      $(this).addClass('active');//adds class clicked one 
     }); 
    }, 

    mouseover: function(){ 
     $(this).stop().animate({height:'260px'},{queue:false, duration:800, easing: 'easeOutBounce'}); 
    }, 

    mouseleave: function(){ 
     $(this).stop().animate({height:'80px'},{queue:false, duration:800, easing: 'easeOutBounce'}); 
    } 

}); 

Answer 4

对于以上问题，我已在http://codebins.com/bin/4ldqpau/

上完成垃圾箱

所以，尽量以下脚本：

function hideMenu() { 
    $(".home-nav li").each(function() { 
     $(this).stop().animate({ 
      height: '80px' 
     }, { 
      queue: false, 
      duration: 800, 
      easing: 'easeOutBounce' 
     }); 
    }); 
} 
$(function() { 
    $(".home-nav li").click(function() { 
     hideMenu(); 
     $(this).stop().animate({ 
      height: '260px' 
     }, { 
      queue: false, 
      duration: 800, 
      easing: 'easeOutBounce' 
     }); 
    }); 
});