堆棧內存溢出
  簡體   English   中英

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

[英]jQuery Show DIV is overflowing other DIVs (footer)

 原文  2014-04-03 13:15:39  1   4    javascript/ jquery/ html/ css/ show

問題描述

我用 jQuery 創建了一個簡單的顯示/隱藏。 我有兩個問題：

1) 當我顯示隱藏的 DIV 時，它出現在頁腳上方。 我想要發生的是頁腳自動下降。

2) 如何在不引入 ID 的情況下在頁面加載時打開“聯系我們”DIV？

這是我的小提琴： 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;
}

4 個解決方案

解決方案1
 1 已采納  2014-04-03 14:17:43

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

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

解決方案2
 0  2014-04-03 13:30:09

這是一個想法。 你介意頁腳是否有一個position:relative; ，從而始終為內容留出空間並使頁腳遠離任何東西。 我從未見過頁腳更改位置，無論如何它們都離底部很遠，

見小提琴

解決方案3
 0  2014-04-03 13:30:47

  1. 為頁腳設置位置屬性並設置為底部。

  2. 您可以設置display: block使用 css 路徑。

這里的代碼

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

這里的演示

解決方案4
 0  2014-04-03 14:44:03

您可能需要更改一些標記和 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;
});

旁注：在實現時請記住一件事ID必須是唯一的，

小提琴示例

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 show hide jquery 在桌面視圖中工作正常，但在手機視圖中，在 show() 期間，div 與其他 div 重疊 顯示其他兩個DIV之間的HTML DIV 如果少於3個div，則顯示其他div 如何在其他子元素溢出JQuery時顯示子元素 當所有其他div不顯示/選擇時，我希望顯示/選擇某個div-jQuery 用其他 div jQuery 替換 div 數據 jquery 刪除其他 div 內部的 div 在jQuery中顯示/隱藏Div，出現“跳過” div問題 其他div內的粘頁腳 僅在單擊特定其他div時顯示div
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM