Question

我有一个项目列表。他们每个人都有一个描述弹出窗口。问题是列表中的最后一项，当点击时，弹出窗口就是屏幕的一半。

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

列表是动态生成的，因此我无法为每个项目分配单个类，然后为每个弹出窗口设置一个位置。我能采取一种务实的方法吗？

Answer 1

我在小提琴中测试了你的代码。点击最后一项时我没有收到任何错误。但我有一个小建议，即将toggle（）更改为sliderToggle（）可能更好。

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

Answer 2

http://jsfiddle.net/4jzq6m8s/3/

我认为你需要这样的东西：

$('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);
    }
});

查看jsfiddle

Answer 3

使用此css从列表的每个第4项右侧获取气泡弹出窗口：

ul li：nth-child（4n）.bubble {right：5px;左：自动;} ul li：nth-child（4n）.bubble：after {right：13px;左：汽车;}

希望它有所帮助。感谢

定位div没有它离开屏幕

3 个答案: