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