Question

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

我的问题是我希望这个菜单

点击＆amp;不要悬停。
单击其他导航按钮时关闭活动关闭。

这是我用于此效果的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”更改为“.click”，问题就出现在点击状态，但只要我将鼠标悬停在当前框之外就会消失。

如果我改变了两个“.mouseover”＆amp; “.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事件而不是鼠标悬停。在点击功能中，您需要关闭所有其他功能并打开单击的功能。

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

jQuery菜单动画问题

4 个答案: