0

希望使用 jquery 移动（滑动）侧边栏时导航菜单向上移动和内容向左移动？我正在为我的网页制作一个结构并使用 jquery 来滑动导航和侧边栏，但内容和页脚仍然在原处，并且删除的部分是空的，那么如何使其相互依赖？

<html>
<head>
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
$(document).ready(function(){
 $("#slidesidebar").click(function(){
    $("#sidebar").slideToggle("slow");
    }); 
}); 
</script>

<style type="text/css">
nav {
    position: fixed;
    left:15%;
    top: 0;
    width: 100%;
    height: 6%;
    background: #555;
  }

  #content {
    position: relative; 
    top:auto;
    width:85%;
    top:6%;
    margin: 0 0 auto auto;
    background:black;
  }

  #main {
  }

  #sidebar{
    position: fixed;
    left:0;
    width:15%;
    color: white;
    background:green;
  }

  footer {
    width: 100%; 
    position: fixed;
    opacity:0.8;
    bottom: 0;
    height:5%;
    left:0;
    background:red;
  } 
 </style>
</head>

<body>

<div id="sidebar">
Sidebar Content
Sidebar Content
</div>

<nav>
Navigation Menu
</nav>

    <div id="content">
        <div id="main" align="center">
Content
</div>


        <footer>
<button style="font-size: .8em;" id="slidesidebar">Flip Side-Search</button>
       Footer
        </footer>

</div>    
    </body>
    </html>
4

1 回答 1

0

您可以将函数传递给 slideToggle 以在动画完成时调用。在那里，您可以随心所欲地操纵内容。

$("#sidebar").slideToggle("slow", function(){
 $("#content").css({width:"100%", float:"left"});
 });

或者您可以让内容同时增长：

$(document).ready(function(){
 $("#slidesidebar").click(function(){
   $("#sidebar").slideToggle("slow");
    $("#content").animate({width:"100%"});
   }); 
});

如果这不起作用，请尝试使用内容的“float”参数。

于 2013-01-14T14:59:50.287 回答