javascript - 我如何检测 jQuery UI 碰撞何时翻转

Question

当鼠标悬停时，我制作了一个带有弹出窗口的表格 <td>使用 jQuery UI 位置。

HTML - 带左/右箭头绝对位置的弹出窗口。

<div id="compare-popup">
    <div id="arrow-left"></div>
    <div id="arrow-right"></div>
    <table cellspacing="0" class="table">
        <tr>
            <td colspan="8">January 4th</td>
        </tr>
        <tr>
            <td>12,086</td>
            <td>6,992</td>
            <td>7,277</td>
            <td>6,612</td>
        </tr>
    </table>
</div>

Java 脚本:

$(document).ready(function(){
    $('td.popup').hoverIntent(function(){
        $('#compare-popup').fadeIn();
        $('#compare-popup').position({
            my: 'left + 10 top',
            at: 'right + 10 top',
            of: $(this),
            collision: 'flip'
        });
    }, 
    function(){
        $('#compare-popup').fadeOut();
        $('#compare-popup').position({
            my: 'left + 10 top',
            at: 'right + 10 top',
            of: $(this),
            collision: 'flip'
        });
    })
});

现在 jquery UI 检测浏览器的边缘并使其翻转。
弹出窗口有左右箭头指向原始单元格。
请告诉我如何检测弹出窗口何时翻转，以便显示/隐藏每个侧边箭头。

请点击链接以更好地理解我的问题。 http://ninninny.com/question/

谢谢。

Answer 1

可能有更优雅的方法来做到这一点，但为了保持简单，您可以添加一个查看弹出窗口偏移量的 if 语句。像这样:

Working Example

$(document).ready(function () {
    $('td.popup').hoverIntent(function () {
        $('#compare-popup').fadeIn();
        $('#compare-popup').position({
            my: 'left+10 top',
            at: 'right+10 top',
            of: $(this), // or $("#otherdiv)
            collision: 'flip'
        });
        if ($('#compare-popup').offset().left > $(this).offset().left) {  //Important bit
            $('#arrow-left').show();
            $('#arrow-right').hide();
        } else {
            $('#arrow-left').hide();
            $('#arrow-right').show();
        }
    },

    function () {
        $('#compare-popup').fadeOut();
        $('#compare-popup').position({
            my: 'left+10 top',
            at: 'right+10 top',
            of: $(this), // or $("#otherdiv)
            collision: 'flip'
        });
    });
});