jQuery Show DIV溢出其他DIV（頁腳）

-1

我用jQuery創建了一個簡單的顯示/隱藏。我有兩個問題：jQuery Show DIV溢出其他DIV（頁腳）

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

來源

2014-04-03 Oam Psy

你的CSS呢？ – TylerH

@TylerH - CSS添加（它也在小提琴） –

看看http://www.cssstickyfooter.com/ @OamPsy – TylerH

正如其他人的建議，您的頁腳的問題與您的內容框被絕對定位在頁面上做。

我注意到在你的演示/小提琴中，你依賴於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

來源

2014-04-03 14:17:43 dward

這很有意義，你已經解釋清楚。有什麼方法可以通過一個類而不是一個ID訪問內容？ –

謝謝，我可以通過將標題和內容分割爲2個不同的DIV來查看您所做的工作，儘管在桌面上看起來不錯，但在手機上查看時，內容位於標題的底部，而不是直接位於其下方具體的標題......這有道理嗎？ –

是的，你可以通過一個類來管理內容容器的顯示/隱藏，但是它不會有後備支持。請記住，你可能會爲你選擇的每個容器使用一個獨特的類，所以一個ID是有意義的 - 你也可以使用'data- *'屬性，我在演示中使用了這些屬性。在你的評論中關於信息不堆疊是有道理的。如果您想操縱CSS或容器屬性來重新排列容器，則可以使用媒體查詢（或JS）。 ** [已更新的JSFiddle]（http://jsfiddle.net/QjTwB/1/）**與媒體查詢，data- *屬性和類選擇器。 – dward

這是一個想法。你介意頁腳是否有一個position:relative;，因此總是留下內容的空間，並保持頁腳遠離任何東西。我從來沒有見過一個頁腳的變化位置，他們是非常遠的底部反正

見頁腳FIDDLE

來源

2014-04-03 13:30:09 LOTUSMS

設置位置屬性，並設置爲底部。
您可以使用css路徑設置display: block。

這裏的代碼

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

這裏demo

來源

2014-04-03 13:30:47 Selvamani

您可能需要改變一些標記和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

來源

2014-04-03 14:44:03

謝謝，我可以看到你有什麼通過將標題和內容分成2個不同的DIV完成，雖然在桌面上看起來不錯，但在手機上觀看時，內容位於標題的底部，而不是直接位於其特定標題的下方......這是否合理？ –

jQuery Show DIV溢出其他DIV（頁腳）

回答

相關問題