Question

@musicnothing在较早的thread中建议的解决方案会在内联div的行下方显示内容div，这在单击div.wrapblock时效果很好。

function placeAfter($block) {
    $block.after($('#content'));
}

$('.wrapblock').click(function() {
    $('#content').css('display','inline-block');
    var top = $(this).offset().top;
    var $blocks = $(this).nextAll('.wrapblock');
    if ($blocks.length == 0) {
        placeAfter($(this));
        return false;
    }
    $blocks.each(function(i, j) {
        if($(this).offset().top != top) {
            placeAfter($(this).prev('.wrapblock'));
            return false;
        } else if ((i + 1) == $blocks.length) {
            placeAfter($(this));
            return false;
        }
    });
});

我遇到的问题。我需要触发相同的效果，但是将click事件添加到wrapblock本身的链接中。

我的代码几乎相同。

我更改的是点击事件句柄，从$('.wrapblock').click(function()到$('.more').on('click', function()我还需要为内容div添加.closest(".wrapblock")以将自己置于包装块之外。

$('.more').on('click', function() {
...
if ($blocks.length == 0) {
        placeAfter($(this).closest(".wrapblock"));
        return false;
    }

可以看到并测试一切http://jsfiddle.net/7Lt1hnaL/

如果有人能够预先知道如何计算偏移方法需要遵循哪个块，那将会很棒。

正如您在最新的小提琴示例中所看到的，内容div不会显示在div行的下方。

我也道歉，我想在讨论中发帖，但我只有一个小小的帖子声誉，不让我，谢谢。

Answer 1

var $chosen = null;
var $allBlocks = [];
$(function(){
	$allBlocks = $('.wrapblock');
})

$(window).on('resize', function() {
    if ($chosen != null) {
        $('#content').css('display','none');
        $('body').append($('#content'));
        $chosen.trigger('click');   
    }
});

$('.more').on('click', function() {
    $chosen = $(this);
    var position = $chosen.parent('.wrapblock').position();
    $('#content').css('display','inline-block');
    $allBlocks.filter(function(idx, ele){
    	return $(ele).position().top == position.top;
    })
    .last()
    .after($('#content'));
});

.wrapblock
{
    background: #963a3a;
    display: inline-block;
    width: 90px;
    height: 90px;
    color: white;
    font-size: 14px;
    text-align: left;
    padding: 10px;
    margin: 10px;
    vertical-align:top;
    position:relative;
}

#content
{
    display:none;
    vertical-align:top;
    width:100%;
    background: #5582c1;
    font-size: 12px;
    color: white;
    padding: 10px;
}
.more {
    position:absolute;
    bottom:15px;
    right:15px;
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wrapblock">1
<span class="more" data-ref="1">more</span>
</div>
<div class="wrapblock">2
<span class="more" data-ref="2">more</span>
</div>
<div class="wrapblock">3
<span class="more" data-ref="3">more</span>
</div>
<div class="wrapblock">4
<span class="more" data-ref="4">more</span>
</div>
<div class="wrapblock">5
<span class="more" data-ref="5">more</span>
</div>
<div class="wrapblock">6
<span class="more" data-ref="6">more</span>
</div>
<div class="wrapblock">7
<span class="more" data-ref="7">more</span>
</div>
<div class="wrapblock">8
<span class="more" data-ref="8">more</span>
</div>
<div class="wrapblock">9
<span class="more" data-ref="9">more</span>
</div>
<div id="content">Some Content</div>

似乎做你想做的事。基本上，它只是将所有块的集合过滤到你单击的块的行，假设它们都具有相同的垂直偏移（顶部），然后取最后一个，因为jQuery将它们保存在文档中订单，这将是布局行中的最后一个。

哦，我更新了小提琴http://jsfiddle.net/7Lt1hnaL/1/

在内联块包裹的行下面添加一个div - 第2部分

1 个答案: