html - 在每个 div 具有相同类的情况下扩展 div 的高度

Question

我目前的问题是我正在制作包含某些小文章的新闻源。 所有的文章都有一个类，就是逻辑。 每篇文章的右上角都有一个向下的箭头。

我希望如果人们点击箭头(这是一个 .svg 文件)内容会展开。 容器的高度为 78px，如果单击按钮，它应该展开，因此高度应该为 auto。

我的问题是我不知道用什么语言做什么。 jQuery 或我读过的是 JS.. 因为如果我正常单击按钮，该类的所有内容都会展开，或获得自动高度 css。我只希望 1 个容器扩展。我认为一些活跃的元素或焦点方法？我不知道。

示例

This is a title

August 1, 2014 at 13:37

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

<article class="newsfeed_item">
<img src="../images/arrow_down.svg" alt="" class="expand" />
<div class="newsfeed_image"><img src="../images/example-img.jpg" alt="" /></div>
<h1>This is a title</h1>
<footer class="extra_info">August 1, 2014 at 13:37</footer>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

CSS

article.newsfeed_item               {border-bottom:1px solid #ccc; width:100%; height:78px; clear:both; position:relative; overflow:hidden;}
article.newsfeed_item h1            {}
article.newsfeed_item p             {padding-bottom:5px; line-height:16px;}
article.newsfeed_item .expand       {height:20px; position:absolute; top:10px; right:0; padding:0 5px;}
article.newsfeed_item .expand:hover {cursor:pointer; background:#a2c139;}
.expanded                           {height:auto;}
footer.extra_info                   {font-family:"GudeaRegular"; font-size:10px; color:#999;}

当用户点击带有“expand”类的图像时，它如何能顺利展开有什么帮助吗？ 感谢您的帮助。

Answer 1

编辑:应该更好用的新答案。

HTML

`<div id='newsbox'><img id='toggler'>toggle me</div>`

JS

$("#toggler").click(function(){
    $("#newsbox").animate({height:50 - $("#newsbox").height()},200);
});

此外，还是不要忘记包含 jQuery <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>