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

マウスオーバーとアウトの代わりにクリックイベントを使用する必要があります。クリック関数内では、他のすべてを閉じて、クリックされたものを開く必要があります。

$(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 に答える
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 に答える