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

debugcn 发表于 Dev

成就

我处于无法解决的情况。我有两个.content div。第一个内容div具有标题和一些隐藏的块内容。第二个内容div有4个按钮。单击每个按钮将调出相关的块。块具有我要求的不同边距顶部。

我想要的是页眉应与所有块保持相同的距离比例。就像如果按下“第四个块按钮”一样，将显示第4块的内容，并且页眉将向下移动，并保持与第1块相同的边距。

在此处输入图片说明

我尝试过固定位置，但他不能那样工作。

是否有可能在jquery或js的帮助下根据每个Block内容更改标题的位置并保持比例？这对我真的很有帮助。我被困在这个非常糟糕的地方。我对jQuery不太满意，是否可以使用jquery做到这一点。

小提琴

的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;
}

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

弓心

是这你在找什么？

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。