javascript - 一次移动两个 div 元素

标签 javascript jquery html

不确定我是否对标题太清楚了。抱歉,来晚了,我想我的头脑还没有清醒。

不管怎样,我想让它做的是..

  1. 单击 div(manager) 时,将出现 div(managerp)。
  2. div(manager) 移动到该区域,同时 managerp 移动到该区域。几乎就像它们作为一个 div 元素移动一样。
  3. 在下一次点击时,managerp 淡出,manager 移回原来的位置。

我可以做到所有这些,但它不会回到原来的位置。我是 jQuery 的新手,所以我在这里寻求您的帮助。

编辑:div 管理器似乎没有回到原来的位置。我试过通过 jQuery 编辑 css 来获取它,但它似乎不起作用。

HTML:

    <div id="manager">
        <span>&raquo;</span>
</div>
<div id="managerp" style="">

</div>

不,我不能把 managerp 放在 manager 中,它似乎没有把自己定位得很好。

jQuery :

            $(document).ready(function() {
            $("#manager").click(function() {
                $("#manager").css({'margin-left' : '270px', 'border-left' : '0'});
                $("#managerp").toggle("slow", function() {
                    if ($("#managerp").is(':visible'))
                        $("span").html("&laquo;");
                    else 
                        $("span").html("&raquo;");
                });
            });
        });

这应该可以帮助您了解它的外观。 (对不起,如果我提供了太多信息)

One Two

感谢您的帮助。如果你需要我更具体地说明它应该做什么,尽管问。

This is how it looks when it doesn't return correctly.

最佳答案

这个怎么样:

$(document).ready(function() {
        $("#manager").click(function() {
            $("#managerp").toggle("slow", function() {
                if($("#managerp").is(':visible')){
                    $("span").html("&laquo;");
                    $("#manager").css({'margin-left' : '0px', 'border-left' : '0'});
                }else{
                    $("span").html("&raquo;");
                    $("#manager").css({'margin-left' : '270px', 'border-left' : '0'});
                }
            });
        });
});

您必须将边距重置为 0px

关于javascript - 一次移动两个 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9731928/

相关文章:

javascript - 类上的 jQuery 单击事件仅触发第一个元素

css - 仅在内部具有边框的 Bootstrap 表

javascript - 为什么我的游戏中没有出现任何框?

javascript - 如何从 jsfiddle 中删除外部资源?

javascript - Typescript:传递函数作为参数返回窗口对象而不是构造函数对象

javascript - Meteor 助手在 Angular 模板中不可用

javascript - JQuery 和 Bootstrap : How to add image from a list of images to a carousel?

javascript - 使用表单输入设置 cookie

javascript - 将自定义代码添加到 jquery 答案

jQuery Sortable - 拖放多个项目