javascript - 根据可见内容部分的比例更改标题部分的位置

Question

我处于一种我无法弄清楚的情况。我有两个 .content div 。第一个内容 div 有标题和一些隐藏的 block 内容。第二个内容 div 有 4 个按钮。单击每个按钮会弹出相关的 block 。 block 具有不同的边距顶部，这是我的要求。

我想要的是标题应该与所有 block 保持相同的距离比例。就像按下“ block 四按钮”一样， block 4 的内容将显示，标题将向下移动，保持与 block 1 相同的边距。

我试过固定位置，但他的方法不行。

是否可以在 jquery 或 js 的帮助下根据每个 block 内容更改标题的位置以保持比例？这对我真的很有帮助。我真的很糟糕。我对 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 函数来修改标题的位置。