2

jQuery特別なイベントhoverintentを関数で動作させるのに苦労していmouseleaveます。（私も代用mouseoutしてみましたmouseleave）

同じ機能を利用してmouseleave、ユーザーのマウスが感度のしきい値を下回ったときにのみイベントが発生するようにする必要があります。

以下のスクリプトを含め、実際の例をhttp://click2fit.com/test_files/accordion_hoverintent.htmlにアップロードしました。

$(function () {     
    $(".accordion_close_leave").accordion({
                event: "click hoverintent",
                collapsible: true,
                active: false,     
                autoHeight: false,
             }).mouseleave(function() {
    $(this).accordion({ active: false}); 
    });  

var cfg = ($.hoverintent = {
    sensitivity: 100,
    interval: 500
});
$.event.special.hoverintent = {
    setup: function() {
        $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
    },
    teardown: function() {
        $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
    },
    handler: function( event ) {
        var that = this,
            args = arguments,
            target = $( event.target ),
            cX, cY, pX, pY;
        function track( event ) {
            cX = event.pageX;
            cY = event.pageY;
        };
        pX = event.pageX;
        pY = event.pageY;
        function clear() {
            target
                .unbind( "mousemove", track )
                .unbind( "mouseout", arguments.callee );
            clearTimeout( timeout );
        }
        function handler() {
            if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
                clear();
                event.type = "hoverintent";
                event.originalEvent = {};
                jQuery.event.handle.apply( that, args );
            } else {
                pX = cX;
                pY = cY;
                timeout = setTimeout( handler, cfg.interval );
            }
        }
        var timeout = setTimeout( handler, cfg.interval );
        target.mousemove( track ).mouseout( clear );
        return true;
    }
};
4

1 に答える 1

1

jQueryのホバーインテント特殊イベントコードは、アコーディオンのイベントオプション（関連するパネルをアクティブ化するためにアコーディオンヘッダーが反応するイベントとして定義される）に含めるために特別に設計されているため、ここでは機能しないことがわかりました。

幸いなことに、BrianCherneのhoverintentプラグインは次のことを行います:-D以下のスクリプトを含めました。動作するフィドルは、http：//jsfiddle.net/chayacooper/GZV5V/26/から入手できます。

マウスリーブをアコーディオン自体にバインドして、ユーザーがアコーディオン全体からマウスを離すまでトリガーされないようにすることを忘れないでください。ユーザーがヘッダーに移動したときにすぐにヘッダーをクリックすると、ダブルアクティベーションに小さな問題がありますが、アコーディオン内のSelect要素を使用できるようにするためにそれを受け入れました。

$(document).ready(function() {
$("#Trigger2").accordion({
    active: false,
    collapsible: true
}).hoverIntent({
    over: function() {},
    out: function() {
        $('.ui-accordion-header-active', this).trigger('click').blur();
    },
    timeout: 1000
})

.children('h3').hoverIntent({
    over: function() {
        $(this).not('.ui-accordion-header-active').trigger('click');
    },
    out: function() {},
    timeout: 1000
});
});
于 2012-12-10T18:15:41.300 に答える