Question

根据以下答案，我设法向左/右滑动div，但面对顶级div的一些问题。现在我想要的是 1.使两条棕色线变薄（如果改变宽度，则会破坏动画效果） 2.slide div左/右单击垂直棕色线并相应地重新调整顶部div的宽度。 3.单击水平棕色线时向上/向下滑动顶部div。我可以部分但不完美。有人可以帮帮我吗。我下面

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="JQuery.js"></script>
<script src="JQuery-UI.js"></script>
<%-- <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>--%>
<link href="App_Themes/Design.css" rel="stylesheet" />
<link href="App_Themes/PageDesigns.css" rel="stylesheet" />
<title></title>
<script type="text/javascript">
    $(document).ready(function () {
        $("#showHideDiv").click(function () {
            if (!$('#divMenu').hasClass("off")) {
                $('#divMenu').animate({ 'margin-left': '-95%' }, 500);
                $('#divMenu').addClass("off");
                $('.div3').animate({ 'left': '-10%', 'width': '99.3%', 'margin-left': '-10.5%' }, 500);
                //$('.div3').animate({ 'left': '-10%', 'width': '99.3%', 'margin-left': '-10.5%' }, 500);

            }
            else {
                $('#divMenu').animate({ 'margin-left': '0px' }, 500);
                $('#divMenu').removeClass("off");
                $('.div3').animate({ 'left': '-0%', 'width': '89%', 'margin-left': '-0%' }, 500);
            }
        });
    });
</script>
</head>
<body>
<form id="form1" runat="server">
    <div style="float: left; width: 11%; height: 850px; padding: 0; margin: 0;">
        <div id="divMenu" class="">
            Sidebar- Menu
        </div>
        <div id="showHideDiv" style="float: left; height: 850px; width: 5%; background-color: brown;">
        </div>
    </div>
    <div class="div3" style="float: left; width: 89%; ">
        <div style="float: left; background-color: #93D209; width: 100%; height: 50px;display:block">
            hello
        </div>
        <div style="height: 0.5%; width: 100%; background-color: brown;display:block">
            hi
        </div>
    </div>
</form>
</body>
</html>

Answer 1

UPDATED DEMO

首先我将.div3 css设置为：

.div3{
    position: absolute;
    width: 89%;
    margin-left: 11%;
}

初始设置边距 - 取决于侧边栏的总宽度。并将其设置为绝对位置，以便它不会下降。如果适合你，你也可以将它设置为固定。

单击侧边栏开关时，.div3设置为将其边距设置为0％并将其宽度增加到99％到100％，这样就可以占据整个屏幕。

 $('.div3').animate({ 'margin-left': '0%', 'width': '99.3%'}, 500);

在切换侧边栏时，将.div3设置为原始/初始边距 - 左边11％和宽度89％。

 $('.div3').animate({ 'margin-left': '11%', 'width': '89%'}, 500);

至于顶部开关，我添加了这个jQuery：

 $("#switch2").click(function () {
        if (!$('#topDiv').hasClass("off")) {
            $('#topDiv').animate({ 'margin-top': '-95%' }, 500);
            $('#topDiv').addClass("off");

        }
        else {
            $('#topDiv').animate({ 'margin-top': '0px' },500);
            $('#topDiv').removeClass("off");
        }
    });

并将id属性（#topDiv和＃switch2）添加到相关的html标记中。

LIKE：

<div class="div3">
        <div id="topDiv">
            hello
        </div>
        <div id="switch2">
            hi
        </div>
</div>

整个jQuery脚本：

$("#showHideDiv").click(function () {
            if (!$('#divMenu').hasClass("off")) {
                $('#divMenu').animate({ 'margin-left': '-95%' }, 500);
                $('#divMenu').addClass("off");
                $('.div3').animate({ 'margin-left': '0%', 'width': '99.3%'}, 500);

            }
            else {
                $('#divMenu').animate({ 'margin-left': '0px' }, 500);
                $('#divMenu').removeClass("off");
                $('.div3').animate({ 'margin-left': '11%', 'width': '89%'}, 500);
            }
        });
     $("#switch2").click(function () {
            if (!$('#topDiv').hasClass("off")) {
                $('#topDiv').animate({ 'margin-top': '-95%' }, 500);
                $('#topDiv').addClass("off");

            }
            else {
                $('#topDiv').animate({ 'margin-top': '0px' },500);
                $('#topDiv').removeClass("off");
            }
        });

<强> Working Sample

Answer 2

 <div class="container">

<div class="menu-btn">
<a href="javascript:void(0);">
    <h6>click me</h6> 
</a>

.container { width:150px; height:500px; background:#000; margin-left:-150px;

}

.menu-btn { width:50px; height:20px; background:#d2d2d2; position: fixed;

z-index：999; top：20px; left：0; margin-left：25px;}

var flagswap=0;
$(document).ready(function () {
  $('.menu-btn a').click(function()
{
    if(flagswap==0)
    {
        $('.container').animate({marginLeft:0},500);
        $('.menu-btn').animate({marginLeft:'170px'},500);
        flagswap=1;
    }
    else
    {
        $('.menu-btn').animate({marginLeft:'25px'},500);
        $('.container').animate({marginLeft:'-150px'},500);
        flagswap=0;
    }
});  
});

http://jsfiddle.net/uBhR6/

通过单击JQuery中的另一个div来向左/向右和向上/向下移动Div

2 个答案: