点击inline-block容器内链接，实现内容div置于行下方问题（续）

我明白你遇到的问题了——原来点击整个wrapblock时内容能乖乖显示在对应行下方，但换成点击里面的.more链接后就跑偏了。核心问题其实是我们需要准确获取触发元素所属的wrapblock的位置信息，然后用这个信息来定位content容器。

下面是修改后的完整方案，我会一步步解释：

关键修改点 #

1. 阻止链接的默认行为：因为.more是<a>标签，点击会触发跳转，我们需要用event.preventDefault()来避免这一点。
2. 准确获取目标容器的位置：通过closest(".wrapblock")找到当前点击链接所属的wrapblock，然后用offset()方法获取它的坐标，再结合它的高度来计算content应该显示的位置。
3. 调整content的定位逻辑：确保content的顶部对齐到wrapblock的底部，左侧和wrapblock对齐。

修改后的代码示例 #

$(document).ready(function() {
    $('.more').on('click', function(event) {
        // 阻止链接默认跳转行为
        event.preventDefault();
        
        // 获取当前点击链接所属的wrapblock
        var $wrapblock = $(this).closest(".wrapblock");
        // 获取wrapblock的位置和尺寸信息
        var blockOffset = $wrapblock.offset();
        var blockHeight = $wrapblock.outerHeight();
        
        // 定位content容器
        $('.content').css({
            top: blockOffset.top + blockHeight + 'px',
            left: blockOffset.left + 'px',
            position: 'absolute'
        }).show();
    });
    
    // 可选：点击页面其他区域隐藏content
    $(document).on('click', function(event) {
        if (!$(event.target).closest('.wrapblock, .content').length) {
            $('.content').hide();
        }
    });
});

代码解释 #

• event.preventDefault()：必须加上，否则点击链接后页面会刷新，之前的定位操作就白做了。
• $(this).closest(".wrapblock")：从当前点击的.more元素向上查找最近的wrapblock父容器，确保我们拿到的是正确的目标容器。
• offset()：返回元素相对于文档的坐标（top和left），这是定位的基准。
• outerHeight()：获取wrapblock的总高度（包括内边距和边框），这样content的顶部刚好接在wrapblock的底部下方，不会重叠。

这样修改后，点击.more链接时，content就会准确显示在对应wrapblock所在行的下方了。

内容的提问来源于stack exchange，提问作者computerbarry