2

我希望你能帮我解决我的问题。您可以在 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”更改为“.click”，问题就不是点击出现，但一旦我将鼠标悬停在当前框外，它就会消失。

如果我将“.mouseover”和“.mouseout”都更改为.click，则不会发生任何事情。

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

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

如果您愿意，我什至可以共享所需的文件，以便您可以帮助我..

4

4 回答 4

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'});
});
于 2012-07-16T11:21:08.607 回答
0

对于上述问题，我已经在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'
        });
    });
});
于 2012-07-16T13:13:49.767 回答
0

您可以使用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'});
    }

});
于 2012-07-16T11:26:53.470 回答
0

您需要使用 click 事件而不是 mouseover 和 out。在 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'}) 
    }); 

});
于 2012-07-16T11:23:04.860 回答