Question

我使用jquery获得了滑动表单，但是当我点击链接时，我希望有一个这样的表单边框：

但是，当我为两者设置边框时，它看起来像是单独的边框。

https://drive.google.com/file/d/0By25CEM_KEOiWU42SFhsaTVmZWc/edit?usp=sharing

以下是代码：

http://jsfiddle.net/nikunj2512/MgcDU/8360/

但是我无法实现围绕链接的这种边界效果。形式。

请帮帮我。

Answer 1

首先我更改了你的jQuery脚本的#add click函数：[将css添加到u286 id，然后将其删除]

$('#add').click(function () {
    if ($('#sliding-form').is(":hidden")) {
        $('#sliding-form').slideDown('slow');
        $('#u286').css({
            'border':'1px solid #000',
            'border-bottom-color':'white'
        });
    } else {
        $('#sliding-form').slideUp('slow');
        $('#u286').removeAttr('style');
    }
});

编辑：我在你的css文件中改变了一下。我将#bottom-header div叠加在#sliding-form div的顶部，以确保存在白色间隙。这是我改变的：

将position: relative;添加到.container班级，
添加了#bottom-header { position: absolute; z-index:10;}，
将background:#fff;添加到#u286，
已移除.mouseOver {background:#fff;}因为它不会影响任何内容，
在top: 30px;中将top: 26px;更改为#sliding-form。

希望这更符合您的喜好！

updated jsFiddle

Useful StackOverflow question / answer on overlays

Jquery滑动边框

1 个答案: