0

ボタンに問題があります。アーカイブを検索しましたが、適切な解決策が見つからないようです。

ボタンでヘッダーを開いたり閉じたりすると同時に、ヘッダーの外側をクリックしたときにヘッダーを閉じたくない

あなたが私の例で見ることができるように：http ：//www.danieldoktor.dk/test/test.html

正しく機能させることができません。

これが私が働けないコードです。

<div class="lists">
    <header class="box_header" id="box1">
        <h1>HEADER 1</h1>
        <div class="setting" id="btn1"></div>
        </header>


$(document).ready(function(){  

    //When mouse rolls over
    $("#btn1").click(function () { 
        $("#box1").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'})  
    });  

    //When mouse is removed
    $("#btn1").mousedown('', function(){  
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:1000, easing: 'easeInBack'})  
    });


    $("#box1").hover('', function(){  
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:1000, easing: 'easeInBack'})  
    });

誰か助けてもらえますか？

ダニエル

4

2 に答える 2

0

mousedownイベントは、マウスボタンを押すとすぐに発生します。私はあなたが探しているのはmouseleaveイベントだと思います:)そして最初のパラメータとして''は必要ありません、ただやってください：

$("#btn1").mouseleave(function(){  
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:1000, easing: 'easeInBack'})  
    });

実際には.mouseenter()、ではなく、イベントも使用することをお勧めします.hover()。

于 2013-02-25T10:43:34.013 に答える
0

まず、クリックイベントのコードを次のように変更する必要があります。

$("#btn1").click(function () { 
    if(!$("#box1").hasClass('header-down')){
        $("#box1").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    }
    else{
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }

});

次に、ヘッダーの外側をクリックしてヘッダーを閉じるためのコードは、次のようになります。

$(document).click(function(){
    if($("#box1").hasClass('header-down')){
        $("#box1").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down'); 
    }
}

$("#box1").click(function(e){
    e.stopPropagation();
}

要素の外側をクリックしてイベントをトリガーする方法については、この質問/回答を参照してください。

于 2013-02-25T10:50:08.623 に答える