更改标题部分的位置与可见内容部分的比例

Question

我处于一种我无法解决的问题。我有两个.content div。第一个内容div有标题和一些隐藏的块内容。 第二个内容div有4个按钮。单击此按钮会显示相关块。块具有不同的margin-top，这符合我的要求。

我想要的是标题应该与所有块保持相同的距离比例。 喜欢if＆＃34; Block 4 button＆＃34;按下Block 4将显示内容，Header将向下移动，保持与块1相同的边距。

我尝试了固定位置，但他没有这样做。

这是否可以根据每个Block内容在jquery或js的帮助下保持比例来更改标题的位置？这对我来说真的很有帮助。我坚持这个非常糟糕。我对jQuery不是很擅长，如果可以用jquery完成，我就无法做到。

FIDDLE

HTML

<div class="content">
    <div class="head">Head</div>

    <div class="block" id="blk-1" style="margin-top:10px;">
        Block 1 Content
    </div>
    <div class="block" id="blk-2" style="margin-top:50px;">
        Block 2 Content
    </div>
    <div class="block" id="blk-3" style="margin-top:80px;">
        Block 3 Content
    </div>
    <div class="block" id="blk-4" style="margin-top:120px;">
        Block 4 Content
    </div>
</div>

<div class="content">
    <button type="button" class="blk-1"> Block One </button> 
    <button type="button" class="blk-2"> Block Two </button> 
    <button type="button" class="blk-3"> Block Three </button>
    <button type="button" class="blk-4"> Block Four </button>

</div>

CSS

.content{
    width:30%;
    float:left;
    margin-right:10px;
}
.head{
    background:red;
    height:20px;
}
.block{
    height:40px;
    background:#20ccfc;
    display:none;
}
button{
   margin-bottom:5px;
}

JS

$('.blk-1').click(function(){
    $(".block").hide();
    $("#blk-1").fadeIn();
});
$('.blk-2').click(function(){
    $(".block").hide();
    $("#blk-2").fadeIn();
});
$('.blk-3').click(function(){
    $(".block").hide();
    $("#blk-3").fadeIn();
});
$('.blk-4').click(function(){
    $(".block").hide();
    $("#blk-4").fadeIn();
});

Answer 1

this您要找的是什么？

我取消了内联style属性并将其放入css中，根据标题的位置设置.block div的位置。您可以通过在每个单击事件中添加额外的jquery函数来修改标题的位置。