Question

请参阅http://www.kaizoku.nl/beta/index.html

我的网站上有3个div框，每个框的属性显示都设置为无，并且使用jQuery函数ShowHide我可以在单击时显示该框。现在我遇到的问题是盒子不会响应彼此的可见性，我想要的是当我点击例如方框3在方框3上方时，方框3将移动到方框1的底部+ 10px而不是框1重叠框3 ...

任何想法？

Answer 1

在第一个函数中添加一个额外的动画：

function ShowHide() {
    if('block' == $('#slidingDiv').css('display')){
        $('div.box3').animate({top: '-=300'}, 1000, function() {
            $("#slidingDiv").animate({ "height": "toggle" }, { duration: 1000 });
        });
    }else{
        $('div.box3').animate({top: '+=300'}, 1000, function() {
            $("#slidingDiv").animate({ "height": "toggle" }, { duration: 1000 });
        });
    }
}

你也可以在if / else之后添加animate / toggle函数而不是作为回调，为了保存一些代码行，你必须看看它是如何以动画方式工作的。

如果你想使用一个监听器并防止重叠动作就这样做，而不是使用ShowHide函数，

   $(document).ready(function() {
        handler = function() {
            $(this).unbind('click', handler)
            if ('block' == $('#slidingDiv').css('display')) {
                $("#slidingDiv").animate({ "height": "toggle" }, 1000, function (){
                     $('div.box3').animate({ top: '-=300' }, 1000 , function() {
                        $("div.box1 a").click(handler);
                     });
                });
            } else {
                $('div.box3').animate({ top: '+=300' }, 1000, function () {
                    $("#slidingDiv").animate({ "height": "toggle" }, 1000, function() {
                        $("div.box1 a").click(handler);
                    });
                });
            }

        }
        $("div.box1 a").click(handler);
    });

Answer 2

尝试使用：

position:relative;
float:left:
clear:both;

每个div上的

......

Answer 3

听起来你需要获得Box3相对于Box1的位置。您可能希望为Box1 + Box3和Box2添加列以帮助进行相对定位。

如何将div框彼此定位

3 个答案: