点击打开相邻的div

Question

上午，

我正在寻找一种解决方案，可以增加相邻div的大小。这就是我所拥有的，但它似乎不起作用：

HTML

<a href="#" id="button-1">Link</a>
<div id='ads-1'></div>

CSS

#ads-1{
    height: 20px;
    width: 100%;
    float: left;
    overflow: hidden;
    background: #6F0;
}

JS

$('#button-1').click(function(){
    $('#ads-1').animate({height:'500px'}, 500);
});

Answer 1

首先包括jQuery：

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

等待document ready：

$(function () {
    $('#button-1').click(function(){
        $('#ads-1').animate({height:'500px'}, 500);
    });
});

JSFiddle Demo

Answer 2

对于像这样的事情，jQuery并不是必需的......你可以用几行CSS来实现它。

p { background-color:#6F0; }
span:focus ~ p { padding-bottom: 200px; }

<span tabindex="0">Link</span>
<p>Click the span and I'll grow taller</p>

http://cssdeck.com/labs/full/p2tdm8kp