0

クリックではなくマウスホバーでセクションを開くjquery-uiアコーディオンを使用していますが、複数のアイテムにすばやくマウスを合わせると、選択されるアイテムはマウスが上にあった最初のアイテムであり、最後の一つ。

デモ ページまたはjsfiddle のこのデモのコピーでこれをテストできます: マウスを最後のアイテムの上に置いて展開し、マウスを最初のアイテムにすばやく移動して、3 番目と 2 番目のアイテムを渡します。マウスが最初のアイテムの上にありますが、最終的には 3 番目のアイテムが開いています。(逆に行うこともできますが、問題を下から上に複製するのが最も簡単です)

マウスが最初に上に移動したアイテムではなく、マウスが上にあるアイテムが最後に開いているように、この動作が発生しないようにするにはどうすればよいですか?

4

1 に答える 1

1

jQuery UI は、hoverIntentアニメーション キューの問題に対処するために、アコーディオン選択の機能を実装しました。彼らが使用したスニペットは次のとおりです->

//on DOM ready
$(function() {
    $("#accordion").accordion({
    event: "click hoverintent"
);
});

var cfg = ($.hoverintent = {
sensitivity: 7,
interval: 100
});

$.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 self = 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";
        // prevent accessing the original event since the new event
        // is fired asynchronously and the old event is no longer
        // usable (#6028)
        event.originalEvent = {};
        jQuery.event.handle.apply( self, args );
        } else {
        pX = cX;
        pY = cY;
        timeout = setTimeout( handler, cfg.interval );
        }
    }
    var timeout = setTimeout( handler, cfg.interval );
    target.mousemove( track ).mouseout( clear );
    return true;
    }
};
于 2012-09-28T17:15:22.237 に答える