Javascript 在不离开屏幕的情况下定位div

我有一份物品清单。它们都有一个带有描述的弹出窗口。问题是，当单击列表上的最后一项时，弹出窗口的屏幕距离为一半

$('ul').on('click', '.link', function () {
    $(this).next('.div').toggle();
});

---

列表是动态生成的，所以我不能为每个项目分配单独的类，然后为每个弹出窗口设置位置。有什么实用的方法可以解决这个问题吗？

我用小提琴测试了你的代码。单击最后一项时，我没有收到任何错误。但我有一个小建议，将切换切换改为sliderToggle可能更好

$('ul').on('click', '.link', function (e) {
    e.preventDefault();
    $(this).next('.bubble').slideToggle();
});

我想你需要这样的东西：

$('ul').on('click', '.link', function (e) {
    e.preventDefault();
    var $bubble = $(this).next('.bubble');
    $bubble.toggle();

    var right_offset = $bubble.offset().left + $bubble.outerWidth(true);
    var window_width = $('body').outerWidth(true);
    if (right_offset > window_width) {
        var margin_left = window_width - right_offset;
        $bubble.css('margin-left', margin_left);
    }
});

---

查看JSFIDLE

使用此css为列表中的每四项从右侧弹出气泡：

ul li:n-child4n.bubble{right:5px；left:auto；} ul li:n-child4n.bubble:after{right:13px；left:auto；}

---

希望能有帮助。谢谢

嗨，谢谢你的关注。我已经更新了小提琴，更清楚地说明了这个问题。