jQuery Show DIV溢出其他DIV（页脚）

Question

我用jQuery创建了一个简单的显示/隐藏。我有两个问题：

1）当我显示我隐藏的DIV时，它出现在页脚上方。我想要发生的是页脚自动下降。

2）如何在页面加载时打开联系我们DIV而无需介绍ID？

这里是我的小提琴：http://jsfiddle.net/oampz/WkuMg/10/

HTML：

<ul class="outline"> 
    <li> 
     <div class="heading"> <a>Contact Us</a> 

     </div> 
     <div class="content"> 
      <ul> 
       <h1>Contact Us</h1> 

       <li>  
        <a href="">How to reach us</a> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
       </li> 
       <li>  
        <a href="">How to email us</a> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
       </li> 
       <li>  
        <a href="">Contact Number</a> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
       </li> 
      </ul> 
     </div> 
    </li> 
    <li> 
     <div class="heading"> 
      <a>Products</a> 
     </div> 
     <div class="content"> 
      <ul> 
       <h1>Products</h1> 

       <li>  
        <a href="">Tabels</a> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
       </li> 
       <li>  
        <a href="">Ladders</a> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
       </li> 
       <li>  
        <a href="">Chairs</a> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
       </li> 
      </ul> 
     </div> 
    </li> 
    <li> 
     <div class="heading"> 
      <a>Our Offices</a> 
     </div> 
     <div class="content"> 
      <ul> 
       <h1>Our offices</h1> 

       <li>  
        <a href="">Bristol</a> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
       </li> 
       <li>  
        <a href="">Manchester</a> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
       </li> 
       <li>  
        <a href="">Leeds</a> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
       </li> 
      </ul> 
     </div> 
    </li> 
</ul> 
<div class="footer">Footer</div> 

的jQuery：

$(".heading").click(function() { 
    var $this = $(this); 
    $this.next(".content").show(400); 
    $this.parent().siblings().children().next().hide(); 
    return false; 
}); 

CSS：

.content { 
    display: none; 
} 

.outline { 
    position: relative; 
} 

.heading { 
    font-weight: bold; 
    padding: 15px 0 15px 20px; 
    background: GREY; 
    width: 30%; 
} 
.content { 
    width: 100%; 
    margin-left: 35%; 
    position: absolute; 
    top: -2px; 
    width: 60%; 
    overflow:hidden; 
} 
.footer { 
    width: 100%; 
    background: blue; 
    color: white; 
} 

Answer 1

正如其他人的建议，您的页脚的问题与您的内容框被绝对定位在页面上做。

我注意到在你的演示/小提琴中，你依赖于javascript被启用或支持你的jQuery库可用。为了扩大您的覆盖范围，我创建了一个仍然可以与普通HTML和CSS一起使用的后备解决方案。您希望为内容备份的原因是，您的用户可能位于功能手机上，或者另一个JS文件发生异常，导致您的内容永远无法显示。所有人都说，即使没有JS，以下演示中的CSS和HTML仍然可以工作。

关于您的演示，您可以根据需要更改jQuery动画。我也操纵了你提供的HTML。我不确定是否所有内容都保留在您的原始ul列表中，或者您有其他内容需要放在页面上 - 但根据您的填充信息，我认为您的意图类似于下面的演示。

HTML

<div class="container clearfix"> 
    <div class="nav"> 
     <ul class="outline"> 
      <li><a href="#contact" data-target="#contact">Contact Us</a></li> 
      <li><a href="#products" data-target="#products">Products</a></li> 
      <li><a href="#offices" data-target="#offices">Offices</a></li> 
     </ul> 
    </div> 
    <div class="main"> 
     <div id="contact" class="content"> 
      <h2>Contact Us</h2> 
      <ul> 
       <li> 
        <a href="#">How to reach us</a> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
       </li> 
       <li> 
        <a href="#">How to email us</a> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
       </li> 
       <li> 
        <a href="#">Contact Number</a> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
       </li> 
     </div> 
     <div id="products" class="content"> 
      <h2>Products</h2> 
      <p>Purus tortor cras nunc adipiscing cursus ut sociis placerat mattis non montes aliquam aliquet cursus porttitor porta tortor duis porttitor odio. Pid, sit aliquam? Lorem augue eu magnis egestas vut sagittis elit rhoncus massa egestas sociis, in pulvinar a amet, ut adipiscing. Nascetur turpis, turpis pulvinar eu sit.</p> 
     </div> 
     <div id="offices" class="content"> 
      <h2>Offices</h2> 
      <ul> 
       <li>Office 1</li> 
       <li>Office 2</li> 
       <li>Office 3</li> 
      </ul> 
     </div> 
    </div> 
</div> 
<div class="footer"> 
    Footer 
</div> 

CSS

/* let's make sure we clear floated elements so .footer can behave normally */ 
.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 

.clearfix:after { clear: both; } 

.nav, 
.main { box-sizing: border-box; } 

.nav { 
    float: left; 
    width: 30%; 
    margin-right: 20px; 
    background-color: #ccc; 
} 

.main { 
    float: left; 
    width: 60%; 
} 

.footer { 
    background-color: blue; 
    color: white; 
} 

/* 
    The .hide class is the key here for fallback. 
    If JS is not enabled or working the content will show. 
    The nav links will also jump to that section. :) 
*/ 
.hide { display: none; } 

jQuery的

$(document).ready(function() { 
    $('.content').addClass('hide'); 

    $('.outline a').on('click', function(e) { 
     e.preventDefault(); 
     $('.content').addClass('hide'); 
     var showContent = $(this).data('target'), 
      selector = '.content' + showContent; 
     $(selector).removeClass('hide'); 
    }); 
}); 

JSFiddle Demo

Answer 2

这是一个想法。你介意页脚是否有一个position:relative;，因此总是留下内容的空间，并保持页脚远离任何东西。我从来没有见过一个页脚的变化位置，他们是非常远的底部反正

见页脚FIDDLE

Answer 3

1. 设置位置属性，并设置为底部。

2. 您可以使用css路径设置display: block。

这里的代码

.footer { 
    width: 100%; 
    background: blue; 
    color: white; 
    position: absolute; 
    bottom: 0px; 
} 
.help-panel { 
position: relative; 
} 

这里demo

Answer 4

您可能需要改变一些标记和CSS，因为我发现在你的情况下，一些无效的HTML，所以我们设置你的左侧菜单由单独的div一起包裹，并采取其他div作为容器！

HTML标记

<div class="menu"> 
<ul class="outline"> 
    <li> 
     <div class="heading"><a>Contact Us</a> 
     </div> 
    </li> 
    <li> 
     <div class="heading"><a>Products</a> 
     </div> 
    </li> 
    <li> 
     <div class="heading"><a>Our Offices</a> 
     </div> 
    </li> 

</ul> 
</div> 
<div id="contactus" class="content"> 
    <ul> 
     <h1>Contact Us</h1> 
     <li><a href="">How to reach us</a> 

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
     </li> 
     <li> <a href="">How to email us</a> 

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
     </li> 
     <li> <a href="">Contact Number</a> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
     </li> 
    </ul> 
</div> 
<div id="products" class="content"> 
    <ul> 
     <h1>Products</h1> 

     <li> <a href="">Tabels</a> 

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
     </li> 
     <li> <a href="">Ladders</a> 

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
     </li> 
     <li> <a href="">Chairs</a> 

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
     </li> 
    </ul> 
</div> 

<div id="ouroffices" class="content"> 
    <ul> 
     <h1>Our offices</h1> 
     <li><a href="">Bristol</a> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
     </li> 
     <li> <a href="">Manchester</a> 

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
     </li> 
     <li> <a href="">Leeds</a> 

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
     </li> 
    </ul> 
</div> 
<div class="footer">Footer</div> 

jQuery的

$(".content").first().css("display","inline-block");//To show first one on load 
$(".heading").click(function() {  
    $(".content").first().show(); 
    var $this = $(this); 
    var divtoShow = $this.text().toLowerCase().split(" ").join(""); // Removes space between text 
    $(".content").hide(); 
    $("#" + divtoShow).css("display","inline-block"); // Added inline style as on show() they will be display:block by default 
    return false; 
}); 

侧面说明：在执行的时候保持一件事记住，标识必须独特 ，

Fiddle Example