Question

不确定我是否对标题过于清楚。对不起，现在已经很晚了，我觉得我没有清醒过来。

无论如何，我想要做的是......

单击div（manager）时，将显示div（managerp）。
div（经理）在经理移动到那里的同时移动到该区域。几乎就像它们作为一个div元素一样移动。
在下一次点击managerp淡出时，经理会回到原来的位置。

我能够做到这一切，但它不会回到原来的位置。在jQuery方面我是新手，所以这就是我向你求助的地方。

编辑：div经理似乎没有回到原来的位置。我已经尝试通过jQuery编辑css来实现它，但它似乎不起作用。

HTML：

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

</div>

不，我不能把经理放在经理里面，似乎并没有把它自己定位得那么好。

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.

Answer 1

这个怎么样：

$(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。

Answer 2

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

Answer 3

IMO你的问题不是处理jQuery。

问题是你不能把#manager和#managerp放在一起作为单个元素

尝试CSS绝对/相对位置

Answer 4

在代码上使用multiple-selector来操作多个元素。喜欢这个

 $("#manager, #managerp").css({
    'marginLeft' : '270px', 
    'borderLeft' : '0'
});

Answer 5

首先猜测，代码中没有任何地方可以实际重置边距。您只是重置文本，但没有余量回零。我在这里错过了什么吗？

Answer 6

希望这会有所帮助......

您需要将Margin-Left重置为0.同时在开始时隐藏div ManagerP。

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
        $(document).ready(function() {
    $("#managerp").hide();
    $("#manager").click(function() {
    $("#managerp").toggle("slow", function() {
          if ($("#managerp").is(':visible')){
              $("span").html("&laquo;");
              $("#manager").css({'margin-left' : '270px', 'border-left' : '01'});           }
          else {
                $("span").html("&raquo;");
                $("#manager").css({'margin-left' : '0px', 'border-left' : '01'});}
                                            });
        });
    });


</script>       
<body>
<div id="manager">
   <span>&raquo;</span>
</div>
<div id="managerp" style="">
  This is a test for sliding control <br>
  This is Manager P DIV
</div>
</body>
</html>

对格式错误道歉......使用记事本工作并不好玩

一次移动两个div元素

6 个答案: