Question

我用jQuery创建了一个简单的show / hide。我有两个问题：

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

设置页脚的位置属性并设置为底部。
您可以使用css路径设置display: block。

这里是代码

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

这里是demo

Answer 4

您可能需要更改一些标记以及CSS，因为我发现您的案例中存在一些无效的HTML，因此，让我们将您的左侧菜单设置为由单独的div包围，然后选择另一个{{ 1}}作为容器！

HTML标记

div

<强>的jQuery

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

附注：在实施时请记住， ID 必须唯一，

Fiddle Example

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

4 个答案: