jquery - jquery 元素中的单击和悬停功能

Question

我有一个导航栏，它在悬停时展开，在鼠标移开时缩小。我想给导航栏插入一个点击功能，点击后导航栏不会缩小。怎么做。目前我的代码是

$(".nav_list li").css('display','none');
    $("#navbar").hover(function(){
        $("#navbar_inner").css({"width":"972px","margin-left":"0px"});
        $(".nav_list li").delay(800).fadeIn(500);
        },
        function(){
            $(".nav_list li").stop(true,true);
            $(".nav_list li").fadeOut(001);
            $("#navbar_inner").css({"width":"70px","margin-left":"451px"});
    });

我如何根据我目前的代码实现期望的结果

Answer 1

$(".nav_list li").css('display', 'none');

function handler1() {
    $(this).off('hover').one("click", handler2);
}

function handler2() {
    $(this).on('hover').one("click", handler1);
}
$("#navbar").one("click", handler1);

在 OP 发表评论后更新

$(".nav_list li").css('display', 'none');

function animate() {
    $("#navbar_inner").css({
        "width": "972px",
            "margin-left": "0px"
    });
    $(".nav_list li").delay(800).fadeIn(500);
}

function animate_off() {
    $(".nav_list li").stop(true, true);
    $(".nav_list li").fadeOut(1);
    $("#navbar_inner").css({
        "width": "70px",
            "margin-left": "451px"
    });
}

function handler1() {
    $(this).off('hover').one("click", handler2);
}

function handler2() {
    $(this).on('hover', function () {
        animate();, animate_off();
    }).one("click", handler1);
}
$("#navbar").one("click", handler1);