Question

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

<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>

Answer 1

您可以将一个函数传递给slideToggle，以便在动画完成时调用。你可以在那里操纵你喜欢的内容。

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

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

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

如果这不能解决问题，请尝试使用＆＃34; float＆＃34;内容参数。

如何制作相互依赖的html结构？

1 个答案: