Question

我正在做一个下拉菜单，其中有2个文本框和按钮.i在网站顶部有一个按钮。当有人点击那个div正在滑落时。我完成了这么多。我需要知道如何用div的幻灯片取下那个按钮....请帮助我..

这是我向下滑动div的jquery代码

       $('.link_sign_in').click(function(){

                var left=$('.link_sign_in').position().left;
                var top=$('.link_sign_in').position().top;

                $(".drop_down").css("left",left-235);
                $(".drop_down").css("top",0);
                $('.drop_down').slideDown();

                });

drop_down的css完成下拉框

.drop_down{
        background-color: #ffffff;
        -webkit-border-bottom-right-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-bottomright: 5px;
        -moz-border-radius-bottomleft: 5px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        height: 200px;
        width: 300px;
        z-index:100;
        top :200px;
        left:200px;
        position: absolute;
        border: 2px solid #F8C82A;


        -webkit-box-shadow: 0px 8px 15px rgba(50, 50, 50, 0.5);
        -moz-box-shadow:    0px 8px 15px rgba(50, 50, 50, 0.5);
        box-shadow:         0px 8px 15px rgba(50, 50, 50, 0.5);

        border-top: none;
        }

代码登录div

.link_sign_in,.link_sign_up{
        cursor:pointer;
        float:left; 
        width:50px;
        margin-left:5px;
        border: 2px solid #f8c82a;
        padding:5px;
        -webkit-border-bottom-right-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-bottomright: 5px;
        -moz-border-radius-bottomleft: 5px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-top: none;

        -webkit-box-shadow: 0px 8px 15px rgba(50, 50, 50, 0.5);
        -moz-box-shadow:    0px 8px 15px rgba(50, 50, 50, 0.5);
        box-shadow:         0px 8px 15px rgba(50, 50, 50, 0.5);
        }

Answer 1

将* { position:relative;}添加到CSS文档的顶部。这将导致所有页面元素相对于其父元素，这将覆盖某些浏览器的默认行为。然后，确保按钮实际上是容器的CHILD，其中包含要向下滑动的div和按钮。然后，使用left:20px;或其他衡量标准（如果需要，使用top或bottom或right）将按钮定位在您想要的位置。然后，当您向下“滑动”div时，将幻灯片应用于包含按钮和滑动div的容器div。这样，按钮和div将向下滑动，按钮将保持在您希望它相对于滑动div的位置。

如何在其他div的幻灯片上移动div？

1 个答案: