2

我的网站中的菜单栏有问题。我需要将菜单栏固定为在画布中工作。我已经设置了位置：固定。

问题是我有其他菜单，有时我需要放置可见并与画布重叠。

我在这里做一个小例子：http: //jsfiddle.net/ptCoder/NgHTN/1/

<div id="menus">
    <div id="hbar">Menu Bar</div>
    <div id="hbar1" style="display:none;">Menu Bar 1</div>
    <div id="hbar2" style="display:none;">Menu Bar 2</div>
</div>
<div class="container">
    <canvas id="c" width="500px" height="800px">CANVAS</canvas>
</div>

请点击“新建菜单栏”。需要的是，当我单击“新菜单栏”时，画布移动到底部，当我单击“仅 1 个菜单”时，仅显示 1 个菜单并将画布移动到顶部，如初始...我不知道正好是所有菜单栏的高度。

有什么技巧可以显示，隐藏不设置边距大小吗？

请帮我解决这个问题。

谢谢你。

4

1 回答 1

2

好的，您将需要一个 javascript 解决方案；

工作 jsFiddle http://jsfiddle.net/NgHTN/4/

基本上，在将每个块显示到#menus div 的高度后，我们将设置顶部 css 参数。

首先，将画布设置为位置：相对。

然后添加处理程序。

$("#btnNewMenu").click(function(){
    $("#hbar1").css("display","block");
    $("#hbar2").css("display","block");
    $(".container").css("top", $("#menus").height());
});

$("#btnShow").click(function(){
    $("#menus").show();
    $(".container").css("top", $("#menus").height());
});

$("#btnHide").click(function(){
    $("#menus").hide();
    $(".container").css("top", 0);
});

$("#btnOnly1").click(function(){
    $("#hbar").css("display","block");
    $("#hbar1").css("display","none");
    $("#hbar2").css("display","none");
    $(".container").css("top", $("#menus").height());
});

或者，如果您不想将 canvas 设置为 position : relative，您可以通过设置“margin-top”而不是“top”来做同样的事情，但您表示出于某种原因需要一种替代方法来设置边距。

于 2013-08-17T12:13:34.080 回答