在每个 div 具有相同的类时扩展 div 的高度答案

【问题标题】：Expend div in height while every div has same class在每个 div 具有相同的类时扩展 div 的高度
【发布时间】：2014-10-28 02:04:09
【问题描述】：

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

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

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

示例

这是一个标题

2014 年 8 月 1 日 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。初恋 irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Exceptioneur sint occaecat cupidatat 不显眼，在 culpa qui officia deserunt mollit anim id est labourum 中失控。

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

当用户单击带有“扩展”类的图像时，如何平滑扩展？感谢您的帮助。

【问题讨论】：

标签： html css expand smooth

【解决方案1】：

你可以使用 jQuery。

我给你做了这个切换视图的功能，这意味着第一次点击它显示更多，第二次点击它显示更少。该函数由on('click', ... )部分触发。

通常您会将高度设置为自动设置动画，但这不起作用。所以我们首先需要知道实际高度是多少。为此，我们将 CSS 高度设置为 auto，然后抓取高度，并将其重置为原始高度。然后我们为它制作动画。

$(document).ready( function() {
    $("img.expand").on('click', function() {
        var p = $(this).parent();
        var currentHeight = p.height();

        if( currentHeight == 78 ) {
            p.height('auto'); /* set to auto */
            var newHeight = p.height(); /* get the actual height */
            p.height( currentHeight ); /* reset the height */
        }
        else {
            var newHeight = "78px";
        }
        $(this).parent().animate({ height : newHeight }, 1000);
    });    
});

另外，请参阅this DEMO。

如果您只希望它展开而不是切换，那么您可以删除一些行并使用以下代码：

$(document).ready( function() {
    $("img.expand").on('click', function() {
        var p = $(this).parent();
        var currentHeight = p.height();
        var newHeight = p.height('auto').height(); 
        p.height( currentHeight );        
        $(this).parent().animate({ height : newHeight }, 1000);
    });    
});

还有a DEMO。

【讨论】：

第二个确实有效。第一个没有。你能解决这个问题吗？我真的很喜欢 Toggle。

【解决方案2】：

编辑：应该更好的新答案。

HTML

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

$("#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>

【讨论】：