1

ホバーすると拡大し、マウスアウトすると縮小するナビゲーションバーがあります。クリック機能をナビゲーションバーに挿入したいのですが、ナビゲーションバーをクリックしても縮小されません。どうやってするの。現在、私のコードは

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

現在のコードに目的の結果を実装する方法

4

3 に答える 3

0 
$(".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);
于 2013-08-29T09:57:41.687 に答える
0 
$('#navbar').on('click', function(){
$("#navbar_inner").css({"width":"972px","margin-left":"0px"});
});
于 2013-08-29T09:46:01.547 に答える
0

はい、可能です。.on()イベント クリック ハンドラー アタッチメントを使用して実行できます。

$('#navbar').on('click', function(){
 //ToDos
 $(this).unbind('hover');  //Incase if you want to stop hovering
});

イベント ハンドラ アタッチメント.on()を使用することをお勧めします。.off()

isHover = true; // Bool variable to hover or not

$("#navbar").on('hover', animation);    

$('#navbar').on('click', function () {
    if (isHover) {
        $(this).off('hover');
        isHover = false;
    } else {
        $(this).on('hover', animation);
        isHover = true;
    }
});

function animation() {
    $("#navbar_inner").css({
        "width": "972px",
        "margin-left": "0px"
    });
    $(".nav_list li").delay(800).fadeIn(500);
}
于 2013-08-29T09:43:01.497 に答える