文章/答案/技术大牛

发布

社区首页 >问答首页 >如何制作相互依赖的html结构？

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

Stack Overflow用户

提问于 2013-01-14 22:41:09

回答 1查看 113关注 0票数 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>

jquery

html

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-01-14 22:59:50

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

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

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

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

如果这不起作用，可以尝试使用content的"float“参数。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14320535

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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